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

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

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

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

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

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

首先要实现一个饼状图

将type类型设置为pie

接着设置

roseType: 'angle'

当然可以有两种选择 radius（圆心角展现数据百分比，半径展现数据大小） 或者 area（圆心角相同，仅通过半径展示数据大小）

通过测试我们发现 默认的angle 与radius一致 即 圆心角展现数据百分比，半径展现数据大小。

我们也可以通过阴影的配置使页面更有立体感

其中'rgba(0, 0, 0, 0.5)'

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。(颜色的透明度)

再加入一些动态效果例如悬停时扇区发生改变 （类似css中的伪类）

图形样式下有 normal（正常显示时样式）与emphasis（高亮时样式）

当前样式不能满足页面设计需求，需要改变背景颜色及文字颜色。这时我们可以设置

backgroundColor 属性与textStyle属性

以上是听过全局属性进行配置，我们也可以通过 系列（series）单独设置每个系列的文本与其他线条颜色

扇形的颜色也可以改变 在itemStyle下

有人说颜色一样没有层次感，想通过明暗渐变表现出层次感

使用 visualMap 可以调节亮暗区间，以及根据明亮程度取色。

如果想不被visualmap修饰可以在series里的对应数据项中设置

如果想要设置每个扇区的颜色可以再color数组中设置

---