Наведите курсор на ось вместо точки (электронные диаграммы)

Я попытался настроить линейный график так, чтобы он наводил указатель мыши на ось 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.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме