Click on the blank part of the background of the column in echarts's bar chart to achieve the same function as clicking on the column

Common click events on echarts charts:

This kind of ordinary click event is only valid when the column is clicked, and the background click of the column does not respond

Now there is a need to click on the background part to have the same event

Solution: Use the new API convertFromPixel provided by echarts to solve it perfectly.

This method uses convertFromPixel and zr to achieve the desired effect, and the implementation method is as follows:

this.echart.getZr().on('click',params=>{     const pointInPixel= [params.offsetX, params.offsetY];     if (this.echart.containPixel('grid',pointInPixel)) {         let xIndex= this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY]);// [number clicked, data index]        var op = this.echart.getOption();



       var data = op.dataset[0].source[xIndex];//Get the required data object through the index

       // perform other operations

    }
});

Guess you like

Origin blog.csdn.net/xiaoxiaoyang007/article/details/116225730