具体实现效果图如下:
这样看上去更清爽一些。
实现代码如下:
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
var res = `${params[0].name} <br/>`
for (let item of params) {
if(item.value != 0){
res +=`<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} :${item.value}h<br/>`
}
}
return res
}
},
这里为什么会加入一个写有行内样式的标签呢?
原因是每个项目前面的带有色彩的小圆点丢失了,需要用html+css绘制一个