Echarts 点击空白位置，获取点击的数据索引

weixin_45162984

已于 2024-01-03 11:57:33 修改

阅读量711

点赞数 10

文章标签：前端数据库 javascript echarts

于 2024-01-03 11:56:57 首次发布

本文链接：https://blog.csdn.net/weixin_45162984/article/details/135360049

版权

本文介绍了如何在Echarts中通过监听Zr的click事件，获取用户点击的空白位置，并通过坐标转换找到对应的数据索引，适用于数据可视化场景。

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

Echarts 点击空白位置，获取点击的数据索引

使用
echartsInstance.getZr()获取点击位置

myChart.getZr().on("click", (params) => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
          let pointInGrid = myChart.convertFromPixel(
            {
              seriesIndex: 0,
            },
            pointInPixel
          );
          let xIndex = pointInGrid[0]; //点击的索引
        }
      });