在vue中使用ref标签，调用Echarts的 getZr()方法，实现柱状图的点击事件

最新推荐文章于 2024-12-10 14:38:40 发布

原创最新推荐文章于 2024-12-10 14:38:40 发布 · 735 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #echarts #vue.js

收录于

通过`this.$refs.barCharRef`获取ECharts实例，然后使用`.getZr()`监听点击事件。当点击发生在grid上，利用`convertFromPixel`方法将像素坐标转换为数据坐标，找出点击的是第几个柱子。

const myChart = this.$refs.barCharRef
      myChart.chart.getZr().on('click', params => {
        let pointInPixel = [params.offsetX, params.offsetY]
        if (myChart.containPixel('grid', pointInPixel)) {
          // 点击第几个柱子
          let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
          console.log(pointInGrid)
        }
      })

需要注意的是使用ref的话需要注意，.getZr()是是.chart下