echarts 点击柱状图获取索引以及数值的解决方案

最新推荐文章于 2025-06-24 18:11:06 发布

小航冲冲冲

最新推荐文章于 2025-06-24 18:11:06 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45932821/article/details/131578792

该代码段展示了如何在Echarts图表上监听点击事件，获取点击位置并转换为数据索引。当点击的列包含LGTD和LTTD属性时，使用Vuex的commit方法更新状态管理器中的地图坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    let chart = echarts.init(document.getElementById('myChart'));
      chart.getZr().on('click', (e) => {
         this.options.series[0].data1 = this.options.series[0].data
       let pointInPixel = [e.offsetX, e.offsetY];
        if (chart.containPixel('grid', pointInPixel)) {
            let pointInGrid = chart.convertFromPixel({
                seriesIndex: 0
            }, pointInPixel);
            let xIndex = pointInGrid[0]; //索引
            let handleIndex = Number(xIndex);
            let seriesObj = chart.getOption(); //图表object对象
            var op = chart.getOption();
            //获得图表中点击的列
            var month = op.series[0].data[handleIndex];  //获取点击的列名
            console.log(op.series[0].data[handleIndex],'88888888888');
            console.log(handleIndex, seriesObj,'9999999999999');
            if (month.LGTD && month.LTTD)
            this.$store.commit("UPDATE_MAPLOCATION_COOR", [
              month.LGTD,
              month.LTTD
            ]);
        };
     
      })