echarts柱状图点击阴影部分触发click事件

在项目中遇到的需求是，数据相差大的时候，数据少的不好点击，也因此不太好看到下钻的数据，所以想到了点击阴影部分。
这里使用的是getZr()
 

   mychart.getZr().on("click", (params) => {
            var pointInPixel = [params.offsetX, params.offsetY];
            // 判断给定的点是否在指定的坐标系
            if (mychart.containPixel("grid", pointInPixel)) {
                  let xIndex = mychart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
                  let option = mychart.getOption()
                  let xData = option.series[0].data[xIndex] 
              _that.clickParamsData = xData;
              <-----此处是项目中的一些穿透逻辑------>
              mychart.setOption(option);
            }
          });

此时鼠标滑过阴影部分鼠标为三角形，下面是将鼠标设置为小手状

          mychart.getZr().on("mousemove", (param) => {
            var pointInPixel = [param.offsetX, param.offsetY];
            if (mychart.containPixel("grid", pointInPixel)) {
              //若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
              mychart.getZr().setCursorStyle("pointer");
            } else {
              mychart.getZr().setCursorStyle("default");
            }
          });

这里有个问题是，点击一次图表会触发多次点击事件，所以需要在getZr() 的click 事件之前先执行
off事件

mychart.getZr().off('click')

使用getZr() 目前遇到的问题是多柱形情况下，无法获取当前点击的柱形的名字