解决自定义 echarts 的 tooltip 之后 tooltip 中图例丢失问题。

Echarts默认的tooltip中是带有图例的,默认的代码:

1
2
3
tooltip: {
trigger: 'axis'
}


但是自定义tooltip的显示之后图例丢失,官方的文档里没有在自定义中保留图例相关的配置。

1
2
3
4
tooltip: {
trigger: 'axis',
formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}'
}


找到一个解决方案:Echarts自定义tooltip提示框及图例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
tooltip: {
trigger: 'axis',
// formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}'
formatter: function(params) {
let val = '';
for (let i = 0; i < params.length; i++) {
const param = params[i];
if (i === 0) {
val = `
<div style="padding:5px 3px">
${param.name}<br/>
<div style="display:flex">
<div style="width:10px;height:10px;border-radius: 50%;margin:6px 4px 0 0;background:
${typeof param.color === 'string' ? param.color : param.color.colorStops[0].color}"></div>
<div>${param.seriesName}${param.value}</div>
</div>`;
} else {
val += `
<div style="display:flex">
<div style="width:10px;height:10px;border-radius: 50%;margin:6px 4px 0 0;background:
${typeof param.color === 'string' ? param.color : param.color.colorStops[0].color}"></div>
<div>${param.seriesName}${param.value}</div>
</div>`;
}
}
val += `</div>`;
return val;
}
},

显示效果:


显示效果没什么问题,但是数据集多了能感觉到弹窗跟随鼠标时有明显的卡顿。