Echarts在线免费图表

 
            var resultData = [{
   name:'孙悟空',
   maxHP:100,
   currentHP:90,
},{
   name:'猪八戒',
   maxHP:80,
   currentHP:70,
},{
   name:'沙悟净',
   maxHP:50,
   currentHP:20,
}]
option = {
    backgroundColor: "#001829",
   //你的代码
   tooltip:{
      trigger:'axis',
      axisPointer:'shadow',
   },
   lengend:{
      show:true,
      left:'35%',
      textStyle:{
         color:'#ffffff'
      }
   },
   dataset:[
      {
         source:resultData,
         dimensions:['name','currentHP','maxHP']
      }
   ],
   xAxis:[
      {
         type:'category',
         axisLabel:{
            interval:0,
            color:'#fff',
            fontSize:13,
         },
         axisLine:{
            show:true,
            lineStyle:{
               color:'#004B97'
            },
         },
         axisTick:{
            show:false,
         },
         axisPointer:{
            type:'shadow',
         }
      }
   ],
   yAxis:[
      {
         type:'value',
         name:'(血量)',
         nameTextStyle:{
            color:'#fff',
            padding:[0,0,0,-30],
         },
         axisTick:{
            show:false,
         },
         axisLine:{
            show:true,
            lineStyle:{
               color:'#004B97'
            },
         },
         axisLabel:{
            interval:0,
            color:'rgba(207,227,252,1)',
         },
         splitLine:{
            show:true,
            lineStyle:{
               type:'dashed',
               color:'#004B97'
            }
         }
      }
   ],
   series:[
      {
         name:'当前生命值',
         type:'bar',
         barWidth:20,
         itemStyle:{
            normal:{
               color:'#00e2fe',
            },
         },
         encode:{
            x:'name',
            y:'currentHP'
         }
      },
      {
         name:'最大生命值',
         type:'bar',
         barGap:'-100%',
         barWidth:20,
         itemStyle:{
            normal:{
               color:'transparent',
               borderColor:'#0179bf',
               borderWidth:2,
            },
         },
         encode:{
            x:'name',
            y:'maxHP'
         }
      }
   ]
};