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’是我自己在全局定义的变量,可根据实际定义

猜你喜欢

转载自blog.csdn.net/BookstoreSpirit/article/details/108078856