美文网首页
ECharts自定义图例点击切换事件

ECharts自定义图例点击切换事件

作者: 小偷阿辉 | 来源:发表于2019-04-08 21:37 被阅读0次

    1.先奉上效果图

    切换前 切换后

    本来红色部分要随切换图例变化的,但是我这里没有海量数据所以没有切换,但是自定义图例点击切换的意义就是能随着图例切换而改变下边的订单分析

    2.代码

    
    var isFirstUnSelect = function(selected) {
    var unSelectedCount = 0; 
    for ( name in selected) { 
      if (!selected.hasOwnProperty(name)) { 
          continue; 
      }
      if (selected[name] == false) { 
          ++unSelectedCount; 
      } 
    } 
          return unSelectedCount==1;
    };
    var isAllUnSelected = function(selected) {
       var selectedCount = 0; 
       for ( name in selected) {
         if (!selected.hasOwnProperty(name)) { continue; } 
         // 所有 selected Object 里面 true 代表 selected, false 代表 unselected 
         if (selected[name] == true) { ++selectedCount; }
         } 
         return selectedCount==0;
    };
    myChart.on('legendselectchanged', function(obj) { 
    data.orderDataType; 
    var selected = obj.selected; 
    var legend = obj.name; // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event,导致本函数重复运行 // 使得 无 selected 对象
     if (selected != undefined) { 
        if(legend=="出货量"){
           data.orderType="2"; getData(); 
        }else{ 
           data.orderType="1"; getData(); 
        } if (isFirstUnSelect(selected)) {
           triggerAction('legendToggleSelect', selected); 
        } else if (isAllUnSelected(selected)) { 
           triggerAction('legendSelect', selected); 
        } 
    }
    });
    
    

    相关文章

      网友评论

          本文标题:ECharts自定义图例点击切换事件

          本文链接:https://www.haomeiwen.com/subject/dxjmiqtx.html