将鼠标悬停在轴上而不是点上（echarts）

Question

我尝试配置折线图以将鼠标悬停在 X 轴上，而不是将鼠标悬停在同一图表上的点上以将值应用于另一个（仪表）。

下面的代码适用于图表上的点：

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

    myChart.on('mousemove', function(params) {
      if (params.seriesType === 'line') {
        let index = params.dataIndex;
        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);
      }
    });
  });

<script src='https://cdn.jsdelivr.net/npm/[email protected]/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>
    
      

我也尝试过：

myChart.getZr().on('mousemove', function(params) {
    let xAxis = myChart.getModel().getComponent('xAxis', 0);
    let pointInGrid = [params.offsetX, params.offsetY];
    let index = xAxis.pointToDataIndex(pointInGrid);
    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);
    }
}); 

和：

triggerLineEvent: true

但不工作。

换句话说，我不希望鼠标移动效果应用于线上的点，而是应用于整条线作为 X 轴的函数。

Answer 1

第二次尝试你就几乎成功了:)

唯一的问题是线路

let index = xAxis.pointToDataIndex(pointInGrid);

。据我所知，方法

pointToDataIndex

不存在。

使用它来查找索引：

let index = myChart.convertFromPixel({seriesIndex: 0},pointInGrid)[0]

（文档）

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

    myChart.getZr().on('mousemove', function(params) {
      let xAxis = myChart.getModel().getComponent('xAxis', 0);
      let pointInGrid = [params.offsetX, params.offsetY];
      let index = myChart.convertFromPixel({seriesIndex: 0},pointInGrid)[0]
      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);
      }
    }); 
  });

<script src='https://cdn.jsdelivr.net/npm/[email protected]/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>