如何在ECharts堆叠柱状图tooltip中仅展示悬停堆叠的所有数据？

在堆叠柱状图里，默认tooltip的触发逻辑有点鸡肋：

• 设trigger: 'item'，只能看到当前悬停的单条数据
• 设trigger: 'axis'，又会把整个轴上的所有堆叠内容都列出来，太乱了

我们要的是：鼠标悬停到某个堆叠柱状条（也就是同一个x轴分类的柱子）时，tooltip只显示这个柱子里所有分段的数据，别扯其他x轴的内容。

具体实现 #

用trigger: 'item'配合自定义formatter函数就能搞定：

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    const idx = params.dataIndex;
    const xName = params.name;
    let content = `<div>${xName}</div>`;
    // 遍历所有系列，抓同一个x轴位置的数据
    params.chart.getOption().series.forEach(s => {
      if (s.data && s.data[idx] !== undefined) {
        content += `<div>${s.name}: ${s.data[idx]}</div>`;
      }
    });
    return content;
  }
}

核心思路 #

• 用trigger: 'item'捕获当前悬停的数据项，拿到对应的x轴索引dataIndex
• 通过params.chart.getOption()获取所有系列的配置，筛选出同一索引下的所有数据
• 把这些数据拼成清晰的tooltip内容，只展示当前堆叠条的所有数据项

内容的提问来源于stack exchange，提问作者Adrn