首页 > 建站教程 > JS、jQ、TS >  echarts设置个性的tooltip正文

echarts设置个性的tooltip

echarts是优秀的图表插件,它的formatter可以设置漂亮的tooltip,通过function实现个性化定制。下面的代码就可以实现下图的效果。其中,param是鼠标移动到图形上的当前参数,可以用它来实现更加复杂的显示效果:

echarts
option = {
    legend: {},
    tooltip: {
        formatter:function(param,index){
            return param.marker +" " + param.seriesName +"<br>"
            +"&nbsp;&nbsp;&nbsp;&nbsp;"+param.name+":"+param['data'][param.componentIndex+1]+'%';
        }
    },
    color:['#1890ff','#33ccff','#f93'],
    dataset: {
      source:[["product","测试总人力","已规划测试人力","待规划测试人力"],["G2产品线",19,5,14],["G1产品线",21,0,21],["A产品线",63,6,57],["D产品线",0,0,0],["C产品线",0,0,0],["G产品线",0,0,0],["Z产品线",84,30,54],["测试产品线",0,0,0],["E产品线",0,0,0],["L产品线",19,0,19],["I产品线",0,0,0],["B产品线",0,0,0],["F产品线",21,16,5],["J产品线",18,0,18],["H产品线",36,0,36]]
    },
    xAxis: { type: "category" },
    yAxis: {},
    series: [
        { type: "bar",barWidth:"20"},
        { type: "bar",barWidth:"20" },
        { type: "bar",barWidth:"20" }
    ]
};