①自定义tooltip
echarts自带的效果是没有单位的,并且需求还需要对数据进行千分位处理,圆点是自己画的。
效果:
formatter: function(params) {
var result = "<div>" + params[0].axisValue + "</div>";
let item1 =
"<span style='display:inline-block;margin-right:5px;margin-bottom:2px;border-radius:10px;width:9px;height:9px;background-color:"+
params[0].color +
";'></span>"
item1 += that.lineData.titName+'库存金额:' + numFmt3(params[0].data,2)+'万元' + "<br/>"
let item2 =
"<span style='display:inline-block;margin-right:5px;margin-bottom:2px;border-radius:10px;width:9px;height:9px;background-color:"+
params[1].color +
";'></span>"
item2 +=that.lineData.titName+'周转天数:' +numFmt3(params[1].data,0) +'天' + "<br/>"
;
result+=item1+item2
return result;
},
②仪表盘效果
仪表盘效果,ui图是比较复杂的,尽量做到还原。其中仪表盘的外边框渐变通过echarts.graphic.LinearGradient这个对象实现,自定义指针样式通过插入指针切图来展示。没有特殊需求,也可以使用echarts自带的指针样式,icon:'triangle'。
效果 :