echarts的柱状图点击柱子背景空白部分实现和点击柱子相同的功能

echarts图表普通的点击事件:

这种普通的点击事件只能在点击柱子的时候有效,柱子的背景点击没有反应

现在有个需求是点击背景部分也有相同的事件

解决方法:利用echarts提供的新API convertFromPixel完美解决。

这种方法借助于convertFromPixel和zr来实现需要的效果,实现方法如下:

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]);// [点击的数字,数据索引]
       var op = this.echart.getOption();

       var data = op.dataset[0].source[xIndex];//通过索引获取需要的数据对象

       // 进行其他操作

    }
});

扫描二维码关注公众号,回复: 15511059 查看本文章

猜你喜欢

转载自blog.csdn.net/xiaoxiaoyang007/article/details/116225730