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

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

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

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

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

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

1、首先打开任一浏览器，找到echarts的API文档中的“配置项”，展开“series”，type=line的就是折线图，此处可以看到折线图的各种设置项与允许的值。

2、打开echarts实例，点击折线图分类，找到并点击最基础的折线图。

3、打开的基础折线图的配置项和运行效果。修改左侧的series配置项，给折线图设置拐点大小为15。

4、点击【运行】按钮，右侧就可以看到拐点图形变大了 symbolSize:15。

5、最后给折线图的拐点图形修改为三角形，修改后，运行，就可以看到图形变成了三角形 symbol:"triangle"。

---