iced-cola

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

Echarts默认的tooltip中是带有图例的，默认的代码：

1
2
3

tooltip: {
	trigger: 'axis'
}

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

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

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

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;
    }
},

显示效果：

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

解决Echarts自定义tooltip之后图例丢失问题