echarts柱状图点击事件实现方式（支持阴影区域点击获取数据信息）

echarts柱状图点击事件实现方式

1. 柱子上的点击事件（只针对柱子绑定事件）

myChart.setOption(this.option);
    myChart.off().on("click", params => {
        ...根据params可获取点击柱子信息进行操做
      }
    });
复制代码

2. cavans的点击事件（针对整个canvas绑定事件，点击柱子阴影区域也能够获取对应的数据信息）

myChart.setOption(this.option);
    myChart.getZr().off("click");
    myChart.getZr().on("click", params => {
      // 获取点击位置
      const pointInPixel = [params.offsetX, params.offsetY];
      // 判断是否在坐标系内
      if (myChart.containPixel("grid", pointInPixel)) {
        // 获取点击位置的坐标系[x，y]
        const yIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1];
        ...根据[x，y]可获取点击柱子信息进行操做
      }
    });
复制代码

containPixel，convertFromPixel 官网连接