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

最新推荐文章于 2025-10-28 09:54:47 发布

原创最新推荐文章于 2025-10-28 09:54:47 发布 · 1.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #javascript

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在ECharts中通过阴影点击解决数据分布不均导致的小数值数据难以点击的问题，并实现相应的交互优化，包括鼠标样式变化及解决重复触发点击事件等问题。

在项目中遇到的需求是，数据相差大的时候，数据少的不好点击，也因此不太好看到下钻的数据，所以想到了点击阴影部分。
这里使用的是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事件