Echarts柱状图实现点击事件

两年半家挖

已于 2022-11-29 13:43:43 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts javascript

于 2022-11-29 13:31:50 首次发布

本文链接：https://blog.youkuaiyun.com/l5410/article/details/128096282

本文介绍了如何使用Echarts实现点击柱状图后弹窗显示对应人员信息。通过监听'click'事件并设置条件判断，避免蓝色柱子触发，利用_this引用解决回调中this指向问题，成功调用方法显示弹窗。在实现过程中，遇到了this访问问题，通过外部保存_this引用解决了问题。

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

本次实现的是点击黄绿色的柱显示对应的人员弹窗，通过打印params值确定了每个柱子的区分字段如下：

       var _this = this;
       myChart.on("click", function (params) {
        //因为我的蓝色柱子不点击，所以添加了条件
        if (params.seriesIndex > 0) {
          _this.userDialogVisible = true;
          //seriesIndex:0 蓝色柱子1 绿色柱子 2 黄色柱子
          //dataIndex:0 单位 1 个人
          //调用方法
          _this.$refs.listUser.showNoActiveUser(
            "",
            params.dataIndex,
            params.seriesIndex
          );
        }
      });

实现的过程也遇到过问题，因为是用了一个方法初始化的柱状图和点击事件，直接通过this调用字段访问不到，需要用在外部定义 _this指向this，才能实现，具体原理不太了解。