Echarts 自己控制 legend 点击事件

Echarts 自己控制 legend 点击事件的问题

先看需求

现在想实现的 情况是

  1. 一进去页面,所有的 Echarts 中 legend 的所有选项都是默认选中的状态(这是 Echarts 默认的)
  2. 然后当“9”号标识,也就是“一#斗”点亮时,与之相对应的“1、2、3”仓位,即“石灰石、污泥球、生白”也必须点亮,
  3. 然后 “9”号点亮之后 “1、2、3”号仓位也可以自己控制自己的 点亮还是关闭,
  4. 然后当“9”号再次从关闭变成点亮的状态时,“1、2、3” 会再次点亮。
var dou1_legend_flag = false;
myChart.on('legendselectchanged', function (params) {
      var option = this.getOption();
      //当前echarts图例选项
      var select_key = Object.keys(params.selected);
      //当前图例的选项是否选中 选中为true 未选中为false
      var select_value = Object.values(params.selected);
      if (option.legend[0].selected.hasOwnProperty("1#斗")) {
          if (option.legend[0].selected["1#斗"] == true) {
              if (!dou1_legend_flag) {
              	  // 控制legend 的显示和隐藏 直接控制 selected 中对应名称的真假值就可以
                  option.legend[0].selected[option.legend[0].data[0]] = true;
                  option.legend[0].selected[option.legend[0].data[1]] = true;
                  option.legend[0].selected[option.legend[0].data[2]] = true;
                  myChart.setOption(option);
                  dou1_legend_flag = true;
              }
          } else {
              dou1_legend_flag = false;
          }
      }
 });
大家有什么疑问和意见,积极在评论区指正,欢迎共同学习。
我是图南,我们下期见
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值