ECharts双刻度仪表盘：Tooltip无法同时展示两个刻度值的问题

问题根源 #

默认情况下，ECharts的Tooltip只会触发当前悬停的系列数据，双刻度仪表盘通常是两个独立的gauge系列，所以Tooltip只会显示当前系列的数值，无法自动关联另一个系列的对应值。

解决思路 #

通过自定义Tooltip的formatter函数，手动关联两个系列的对应索引数据，将双刻度值整合后展示。

具体实现 #

1. 保证数据对应关系 #

两个gauge系列的data数组长度必须一致，每个索引位置对应同一个指针的双刻度值（比如索引0对应指针1的100刻度值和60刻度值）。

2. 配置自定义Tooltip #

修改Tooltip的trigger为'item'，并编写formatter函数获取两个系列的对应数据：

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    // 获取当前指针的索引
    const idx = params.dataIndex;
    // 获取图表的所有系列配置
    const allSeries = params.series.chart.getOption().series;
    // 从两个系列中取出对应索引的数值
    const value100 = allSeries[0].data[idx].value;
    const value60 = allSeries[1].data[idx].value;
    
    // 格式化Tooltip显示内容
    return `
      <div style="padding: 8px;">
        <p>${params.name}</p>
        <p>0-100刻度：${value100}</p>
        <p>0-60刻度：${value60}</p>
      </div>
    `;
  }
}

3. 完整示例代码 #

option = {
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      const idx = params.dataIndex;
      const allSeries = params.series.chart.getOption().series;
      const value100 = allSeries[0].data[idx].value;
      const value60 = allSeries[1].data[idx].value;
      
      return `
        <div style="padding: 8px;">
          <strong>${params.name}</strong>
          <p>0-100刻度：${value100}</p>
          <p>0-60刻度：${value60}</p>
        </div>
      `;
    }
  },
  series: [
    {
      type: 'gauge',
      max: 100,
      radius: '70%',
      data: [
        { value: 50, name: '指针1' },
        { value: 75, name: '指针2' }
      ],
      // 配置第一个刻度的样式（显示0-100刻度）
      axisLine: {
        lineStyle: {
          width: 15,
          color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
        }
      }
    },
    {
      type: 'gauge',
      max: 60,
      radius: '70%',
      data: [
        { value: 30, name: '指针1' },
        { value: 45, name: '指针2' }
      ],
      // 隐藏第二个系列的刻度元素，避免重复显示
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
      // 保持指针样式与第一个系列一致
      pointer: {
        length: '70%',
        width: 3
      }
    }
  ]
};

注意事项 #

• 如果双刻度值是线性比例关系（比如100对应60，即value60 = value100 * 0.6），可以不用在第二个系列中存储数据，直接在formatter里计算得到，减少冗余配置。
• 若双刻度是非线性映射，必须在两个系列的data中一一对应存储数值，确保索引匹配。

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