echart柱子太短无法点击问题
在做echarts柱图的时候,有时候可能会有下转或者一些点击功能,一般会使用 myChart.on('click',function(){//执行代码}) 去实现功能,但是,有的时候,会出现某个柱子数据太少,可能会点不到,这是可以使用 myChart.getZr().on('click',function(){}) 去代替之前的点击事件,如下:
myChart.getZr().on('click', function (p) {
const pointInPixel = [p.offsetX, p.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
//执行代码
console.log($this.tacitly.parma[0])
}
});
这种事件需要配合tooltip中的farmater一起使用,在option中加入如下代码:
tooltip: {
trigger: 'axis',
formatter: function (p) {
$this.tacitly.parma = p
}
},
注意:这里的‘$this.tacitly.parma’
是我自己在全局定义的变量,可根据实际定义