Echarts 使用getZr()事件获取柱状图当前点击列的数据

如图所示：希望点击柱状条，可以使其他地方的数据跟着改变，这里只需要获取到当前点击条目的名称即可，可根据需要获取想要的数据。

image.png

点击 纵向坐标轴 的柱形(如上图柱形)

 charts.getZr().off('click') //防止触发两次点击事件
      charts.getZr().on('click', function (params) {
        console.log('Echarts 点击这一系列 ')
        let op = charts.getOption()
        let pointInPixel = [params.offsetX, params.offsetY]
        if (charts.containPixel('grid', pointInPixel)) {
          const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[1]
          let handleIndex = Number(xIndex)
          //获得图表中点击的列
          var name = op.yAxis[0].data[handleIndex]  // 当前点击的 Y轴 的名称
          console.log(name)
        }
      })

点击横向 坐标轴的柱形 只需要修改

const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]

当前点击的 X 轴坐标的名称

op.xAxis[0].data[xIndex]