首页 前端知识 Echarts柱状图实现点击事件

Echarts柱状图实现点击事件

2024-06-09 09:06:15 前端知识 前端哥 926 41 我要收藏

 本次实现的是点击黄绿色的柱显示对应的人员弹窗,通过打印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,才能实现,具体原理不太了解。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11640.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!