option = { legend: {}, tooltip: { formatter:function(param,index){ return param.marker +" " + param.seriesName +"<br>" +" "+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" } ] };
echarts设置个性的tooltip
echarts是优秀的图表插件,它的formatter可以设置漂亮的tooltip,通过function实现个性化定制。下面的代码就可以实现下图的效果。其中,param是鼠标移动到图形上的当前参数,可以用它来实现更加复杂的显示效果: