echarts，点击事件，点击空白处与柱状图

Z_Wonderful

已于 2024-04-19 15:32:59 修改

阅读量630

点赞数 2

分类专栏： echarts 文章标签： echarts javascript 前端

于 2024-04-19 15:19:14 首次发布

本文链接：https://blog.csdn.net/Z_Wonderful/article/details/137966195

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讨论了如何在ECharts中实现折线图的点击事件，以便在鼠标任意点击时自动找到最近节点的数据。作者提到使用lodash的_.debounce函数来控制事件频率，并详细展示了如何处理点击图表、柱子、折线点以及空白区域的逻辑。

摘要由CSDN通过智能技术生成

echarts，点击事件

问题：

折线图的情况
只有点击到折线节点的时候才能拿到返回数据或者进行下一步操作！

期望在鼠标随便点击的情况下，可以自动找到最近节点的数据，做一些事情，而不是去费力费眼的去找那个小小的折线节点点击

重要

要使用节流

import _ from 'lodash';
_.debounce()

清除点击事件（重要）

 myChart.off('click');
 myChart.getZr().off('click');

点击图表柱子或折线点

    
    myChart.off('click');
    myChart.on(
      'click',
      _.debounce(function (params) {
        console.log('事件echartData', params, params.data);
      }, 300)
    );

点击空白处

getOption

     myChart.getZr().off('click');
     myChart.getZr().on(
      'click',
      _.debounce(function (params) {
        let pointInPixel = [params.offsetX, params.offsetY];
          if (myChart.containPixel('grid', pointInPixel)) {
            let pointInGrid = myChart.convertFromPixel(
              {
                seriesIndex: 0,
              },
              pointInPixel
            );
            let xIndex = pointInGrid[0]; //点击的索引
            var option = myChart.getOption();
            let seriesName = option.series[xIndex].name;
            console.log('事件echartDatagetZr', params, xIndex,seriesName, pointInGrid);
        }
      }, 1000)
    );