Echarts 实现监听滑动 Tooltip 事件小技巧

[zhangyu921]

TL;DR: 在 tooltip 配置的 formatter 配置里执行函数

---

项目中有一个需求，要实现在折线图上滑动，下方的表格的数据要随之联动。

一开始查阅 Echarts 的文档发现 MarkLine 上可以定义事件，可以基本实现这个功能。在数据处理阶段，顺便生成 markline 的数据就好了。

chart.on('mouseover', (params: any) => {
    setActiveDate(params.data.value);
});

当然这样效果是有点缺憾的，就是markline的“粗细”不好掌握，必须严格的指到 markline 上才能触发事件。

后面又查到了这个 issue，可以直接利用formatter来实现：

// ...
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        crossStyle: {
          type: 'solid',
        },
      },
      formatter: (params: any[]) => {
        // eslint-disable-next-line no-unused-expressions
        onToolTipChange?.(params);
      },
    },
// ...

果然还是群众的智慧靠谱啊~

感谢听我碎碎念到这的朋友，下面是一个替换原来的tooltip展示的实现：

    formatter: (params: any[]) => {
      // onToolTipChange?.(params);
      return params.reduce((acc, cur) => {
        const str = `${cur?.marker}${cur?.seriesName}: ${cur?.value} <br/>`;
        return acc + str;
      }, `${params?.[0]?.axisValue ?? ''} <br/>`);
    },

[hyacinthsWang]

设置tooltip后datazoom失效（k线图）。。。。

[Cinea4678]

卧槽，居然还有用format回调来监听event这种奇技淫巧，群众的智慧真是不容小觑