echarts柱状图点击事件实现方式
- 柱子上的点击事件(只针对柱子绑定事件)
myChart.setOption(this.option);
myChart.off().on("click", params => {
...根据params可获取点击柱子信息进行操作
}
});
- 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]可获取点击柱子信息进行操作
}
});