Echarts在线免费图表

 
            var resultData = [{
   name:'孙悟空',
   maxHP:50,
},{
   name:'猪八戒',
   maxHP:80,
},{
   name:'沙悟净',
   maxHP:50,
}]
option = {
    backgroundColor: "#001829",
   //你的代码
   tooltip:{
      trigger:'axis',
      axisPointer:'shadow',
      formatter(param){
         let html = '';
         if(param.length>0){
            const {value,marker} = param[0];
            html += `${marker}${value.name}:${value,maxHP}个`
         }
         return html;
      }
   },
   dataset:[
      {
         source:resultData,
         dimensions:['name','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:'pictorialBar',
         symbolSize:[50,15],
         symbolOffset:[0,3],
         z:12,
         itemStyle:{
            normal:{
               color:new echarts.graphic.LinearGradient(0,0,0,1,[
                  {offset:0,color:'#214bd2'},
                  {offset:1,color:'#214bd2'}
               ],false),
            },
         },
         encode:{
            x:'name',
            y:'maxHP'
         }
      },
      {  
         //柱体
         name:'',
         type:'bar',
         barWidth:50,
         barGap:'0%',
         itemStyle:{
            normal:{
               color:{x:0,y:0,x2:0,y2:1,type:'linear',global:false,colorStops:[
                  {offset:0,color:'#0599e4'},
                  {offset:1,color:'#0d367e'}
               ]},
            },
         },
         encode:{
            x:'name',
            y:'maxHP'
         }
      },
      {  
         //柱子顶部
         name:'',
         type:'pictorialBar',
         symbolSize:[50,10],
         symbolOffset:[0,-3],
         z:12,
         symbolPosition:'end',
         label:{
            show:true,
            position:'top',
            textStyle:{
               fontSize:10,
               color:'#fff'
            }
         },
         itemStyle:{
            normal:{
               color:new echarts.graphic.LinearGradient(0,0,0,1,[
                  {offset:0,color:'#50A7FF'},
                  {offset:1,color:'#02D6EA'}
               ],false),
            },
         },
         encode:{
            x:'name',
            y:'maxHP'
         }
      }
   ]
};