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 查看本文章