ECharts实现鼠标悬停X轴而非数据点联动仪表盘

问题背景 #

需求是实现ECharts折线图中，鼠标悬停X轴对应的任意竖线区域时，联动更新仪表盘（gauge）数据，而非仅在悬停折线数据点时触发。当前代码仅支持悬停数据点时更新，尝试过getZr()的鼠标事件和triggerLineEvent配置均未生效。

解决方案 #

核心思路是利用ECharts的axisPointer组件监听X轴区域的鼠标悬停事件，该组件会在鼠标覆盖X轴对应竖线区域时触发，可直接获取当前数据索引，进而联动更新仪表盘。

修改步骤 #

1. 配置折线图的axisPointer：在折线图配置中添加axisPointer，设置触发方式为axis，确保鼠标悬停X轴全区域时触发事件。
2. 监听axisPointer事件：通过axisPointer事件回调获取当前X轴对应的dataIndex。
3. 更新仪表盘数据：根据dataIndex从数据源取值，更新仪表盘配置并重新渲染。

修改后的完整代码 #

HTML部分

<script src='https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js'></script>
<link href='https://fonts.cdnfonts.com/css/ds-digital' rel='stylesheet'>
    
<div id='chart' style='width: 400px; height: 200px;'></div>
<div id='gauge' style='width: 300px; height: 300px; margin-top: -60px;'></div>

JavaScript部分

document.addEventListener('DOMContentLoaded', function() {
    let myChart = echarts.init(document.getElementById('chart'));
    let gaugeChart = echarts.init(document.getElementById('gauge'));

    let dataset = {
      'source': {
        'quant': [1000, 2000, 3000, 4000, 5000, 6000],
        'Discount': [2, 82.1, 88.7, 70.1, 53.4, 85.1],
        'Discount (adj)': [8, 51.4, 55.1, 53.3, 73.8, 68.7],
        'Increase': [-4, -62.2, -69.5, -36.4, -45.2, -32.5]
      }
    }

    let option = {
      tooltip: {
        trigger: 'axis'
      },
      // 配置axisPointer，监听X轴全区域
      axisPointer: {
        trigger: 'axis',
        type: 'line'
      },
      xAxis: {
        type: 'category',
        data: dataset.source.quant.map(value => value.toFixed(0))
      },
      yAxis: {
        type: 'value'
      },
      series: [{
          type: 'line',
          name: 'Discount',
          data: dataset.source.Discount
        },
        {
          type: 'line',
          name: 'Increase',
          data: dataset.source.Increase
        }
      ]
    };

    myChart.setOption(option);

    let gaugeOption = {
      series: [{
        type: 'gauge',
        min: -100,
        max: 100,
        detail: {
          formatter: '{value}%'
        },
        axisLabel: {
          textStyle: {
            fontSize: 15,
            fontFamily: 'Lato',
            color: '#f2f2f2',
            textBorderWidth: 1,
            textBorderColor: '#020202'
          }
        },
        data: [{
            value: 0,
            name: 'Discount'
          },
          {
            value: 0,
            name: 'Increase'
          },
          {
            value: 50,
            name: 'TEST'
          }
        ]
      }]
    };

    gaugeChart.setOption(gaugeOption);

    // 监听axisPointer事件，获取当前X轴索引并更新仪表盘
    myChart.on('axisPointer', function(params) {
      let index = params.axesInfo[0].valueIndex;
      if (index >= 0 && index < dataset.source.quant.length) {
        let value1 = dataset.source['Discount'][index];
        let value2 = dataset.source['Increase'][index];
        gaugeOption.series[0].data[0].value = value1;
        gaugeOption.series[0].data[1].value = value2;
        gaugeChart.setOption(gaugeOption);
      }
    });
  });

原方案失效原因说明 #

• 原mousemove事件仅监听折线系列的元素，只有鼠标落在数据点上才会触发，无法覆盖X轴全区域。
• 使用getZr()事件时，直接用offsetX/offsetY（画布绝对坐标）调用pointToDataIndex会导致索引计算错误，需先通过convertFromPixel转换为坐标系内的点。
• triggerLineEvent仅针对折线线段触发事件，而非X轴区域，不符合需求。

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