关于Echarts条形柱状图的方法

最新推荐文章于 2025-05-23 15:13:29 发布

原创最新推荐文章于 2025-05-23 15:13:29 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

文章讲述了如何在条形柱状图中设置点击事件，点击图例区域会跳转到A页面，而点击具体的条形图则跳转到B页面，并能识别点击的特定条形。通过myChart.getZr().on(click)监听点击事件，利用ZRender的参数判断点击位置，实现精确跳转。同时，为了避免重复点击，使用myChart.getZr().off(click)移除事件监听器。

(1)条形柱状图点击图例区域跳转A页面、点击条形图跳转B页面并精确到点击的哪根条形图

点击图例区域跳转页面，需要把点击图例显示隐藏的功能关掉哦

下面是事件方法

 myChart.getZr().on("click", function (params) {
      if (!params.target && params.topTarget) {
        // 点击图例区域
      } else if (params.target && params.topTarget) {
        //点击条形图
        var pointInPixel = [params.offsetX, params.offsetY];
        var pointInGrid = myChart.convertFromPixel("grid", pointInPixel);
        if (myChart.containPixel("grid", pointInPixel)) {
          let chart_x = myChart.getOption().xAxis[0].data[pointInGrid[0]]; //获取X轴刻度的值
        }
      }
    });