解决自定义 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: 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; } },
|
显示效果:

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