echarts监听点击（空白处）事件，echarts监听滑动事件

最新推荐文章于 2025-07-08 16:58:40 发布

原创最新推荐文章于 2025-07-08 16:58:40 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

javaScript 同时被 2 个专栏收录

1 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文详细介绍了如何使用ECharts的getZr()属性来监听和处理图表上的滑动和点击事件，通过具体代码示例展示了如何获取事件参数，并在'grid'区域中转换像素坐标到数据坐标。

利用getZr()属性获取滑动事件和点击事件，（需要支持es6，否则自行改写）

let obj = document.getElementById('xxxxxxxxxxxxxxId')
if (!obj) return
let myChart = echarts.init(obj)
myChart.setOption(item.option)
// 点击
myChart.getZr().on('click', params => {
  const pointInPixel = [params.offsetX, params.offsetY]
  if (myChart.containPixel('grid', pointInPixel)) {
    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
    alert(xIndex)
  }
})
// 滑动
myChart.getZr().on('mousemove', params => {
  const pointInPixel = [params.offsetX, params.offsetY]
  if (myChart.containPixel('grid', pointInPixel)) {
    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
    alert(xIndex)
  }
})