echarts柱状图阴影区域点击事件

背景说明

我们在做echarts图表的时候经常会出现需要点击图表打开弹窗或者打开新的页面，而如果图表是柱状图的话，可能会出现最大值和最小值差距过大的情况，比如普通的值大小都在1000上下，然后有几个值的大小只有个位数，这种情况下我们首先就需要将坐标轴指示器的type改为'shadow'，这样首先鼠标移入当前数据那一列就能选中并显示tooltip了，然后更进一步，我们想要点击坐标轴指示器的阴影区域从而获取当前列的内容该怎么做呢，这个时候我们就需要echarts内部的getZr()方法了。

在vue中应用

由于我项目中使用的是vue-echarts，可以通过@zr:click="xxx"直接绑定zr事件

    

......
    handleZrClick(params) {
      const chart = this.$refs.chart.chart; // echarts实例
      const pointInPixel = [params.offsetX, params.offsetY];
      let xIndex; // x轴索引
      if (chart.containPixel('grid', pointInPixel)) {
        xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
      }
      // 点击到图表其他区域不操作
      if (typeof xIndex !== 'number') {
        return;
      }
      const dataArr = chart.getOption().series[0].data;
      // 当前选中项
      const currentSelectedData = dataArr[xIndex];
      console.log(currentSelectedData);
    }

如果是常规流程的话就是使用echarts实例调用getZr()，最好是先解绑click事件

const chart = this.$refs.chart.chart;
chart.off('click');
chart.getZr().on('click', params => {
......
//  同上面的处理逻辑
})

理论上来说直角坐标系里面的图都可以应用这个方法，只是说柱状图最有应用价值。

这个点是几个月前的项目里用到过的，现在写这篇文章找资料的时候发现了一篇不错的文章，里面介绍的挺详细，留作以后备用。在Echarts区域的任何位置精准触发事件