来源
点击柱状图,这个等级下的标签显示在右侧等级中,当柱状图高度很低不方便点到,这时就衍生出了需求
需求
解决这个问题,有两个解决办法
方式一:给x轴文字添加点击事件 (图中绿色框框区域)
方式二:给柱状图整条柱状区域添加点击事件(图中蓝色框框区域)
方式一实现(给x轴文字添加点击事件 )
- 将xAxis的属性triggerEvent 置为 true;
xAxis: [
{
type: "category",
triggerEvent: true,
},
],
- 添加点击事件(myChart是柱状图表)
myChart.on("click", (params) => {
if (params.name) {
//点击柱状图
console.log(params.name)
} else {
//点击x轴文字
console.log(params.value)
}
});
方式二实现(给柱状图整条柱状区域添加点击事件)
myChart.getZr().on("click", (params) => {
let pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
console.log(xIndex,this.barDataPro[xIndex].levelName)
}
});
其中,getZr()方法可以监听到整个画布的点击事件,xIndex是被点击的柱形的index
若要实现获取id的效果,则需要拿到series的数组,再通过index拿到对应的数据对象