echarts 柱状图点击非柱状部分触发点击事件

原创已于 2024-03-05 10:13:53 修改 · 846 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

于 2024-03-05 10:11:41 首次发布

本文详细描述了如何在ECharts柱状图中实现点击事件的处理，包括区分点击在柱子部分还是非柱子部分，并通过API获取选中的柱子数据。

点击柱子和点击非柱子部分

oBar.setOption(option)
oBar.getZr().off('click')
// 处理点击事件
oBar.getZr().on('click', function (params) {
         let pointInPixel = [params.offsetX, params.offsetY]
         if (oBar.containPixel('grid', pointInPixel)) {
               let pointInGrid = oBar.convertFromPixel({
               seriesIndex: 0
            }, pointInPixel);
            let yIndex = pointInGrid[1]; //索引，可取x或y轴的，当前取y轴
            let handleIndex = Number(yIndex);
            let XIndex = Number(pointInGrid[0]);
            let seriesObj = oBar.getOption(); //图表object对象
            let selName = seriesObj.xAxis[0].data[XIndex]//获取到区域点击选中的柱子的name
            //点击柱子进行触发
           }else{
            //非柱子触发
          }
});