解决echarts柱状图数量太少，点击事件不生效问题

xjmige

已于 2022-11-09 12:26:39 修改

阅读量1.8k

点赞数 9

文章标签： echarts

于 2022-11-09 11:57:13 首次发布

本文链接：https://blog.csdn.net/xjmige/article/details/127767088

版权

// myChart4.on("click",(e)=> {
//   console.log("eformychart4",e)
//
//
//   if(e.componentType=="series"){
//
//     myChart4.resize();
//     this.getStatisticLabelEntList(e.name);
//   }
//
// })

//这种方式在柱状图里面，当数量太少是点击不到的




let that=this;
myChart4.off('click');
myChart4.getZr().on('click',function (params) {
  console.log(params,"test654")
  let pointInPixel= [params.offsetX,params.offsetY];
  if(myChart4.containPixel('grid',pointInPixel)){
    let pointInGrid=myChart4.convertFromPixel({seriesIndex: 0},pointInPixel);
    let xIndex=pointInGrid[0];
    console.log(xIndex,"xindex",that.option4.xAxis[0].data);
    myChart4.resize();
    that.getStatisticLabelEntList(that.option4.xAxis[0].data[xIndex]);
  }
})

关闭echarts的点击事件，通过点击位置获取到xIndex为第几列，0代表第1列，然后通过这个去找到你本地的数据，完成点击效果.