echarts添加点击事件

echarts柱状图点击事件

最近做echarts柱状图，遇到了两个个问题，此处记录一下：

1. 点击柱状图某一个柱体，跳转页面，由于数据差异大，有的柱体很长，有的很短，短的柱体很难点击到，需要设置整个柱形区域都可以点击

2. 页面上有两个标签，切换标签显示不同数据，是对同一个echarts进行的操作，切换标签后点击柱体，会触发多次点击事件

设置柱体的点击事件

myChart.on('click', function (params) {  
    let dataIndex = params.dataIndex;//柱形的下标
});

设置整条柱形所在区域的点击事件

• 纵向柱状图

myChart.getZr().on("click", (params) => {
    const pointInPixel = [params.offsetX, params.offsetY];
    if (myChart.containPixel("grid", pointInPixel)) {
         let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
        ])[0];//柱形的下标 ，此处取[0]
    }
});

• 横向柱状图

myChart.getZr().on("click", (params) => {
    const pointInPixel = [params.offsetX, params.offsetY];
    if (myChart.containPixel("grid", pointInPixel)) {
        let yIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
        ])[1];//柱形的下标 ，此处取[1]
    }
});

一次点击会触发多次点击事件，可以在设置click事件之前清除click事件

myChart.off('click');
或
myChart.getZr().off('click');
//此处根据设置的点击事件不同用不同的清除方法

注意：绑定失效请检查是否设置silent：true，默认为false不可点击