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

2019-04-08  本文已影响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); 
    } 
}
});

上一篇下一篇

猜你喜欢

热点阅读