Hover over the axis instead of the point (echarts)

Question

I tried to configure the line graph to hover the mouse on the X axis, instead of hovering the mouse over the point on this same graph to apply the value to another (gauge).

This code below works for the point on the graph:

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>
    
      

I tried it too:

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

and:

triggerLineEvent: true

But not working.

In other words, I don't want the mousemove effect to apply to the point on the line, but to the whole line as a function of the X axis.

Answer 1

You almost had it with the second try :)

The only issue is the line let index = xAxis.pointToDataIndex(pointInGrid);. From what I know, the method pointToDataIndex doesn't exist.

Use this instead to find the index :
let index = myChart.convertFromPixel({seriesIndex: 0},pointInGrid)[0] (Doc)

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>