echarts 怎么点击图例显示该折线，隐藏其他折线

Question

类似这样的功能，不过这是用highcharts做的，我现在需要在echarts上修改：https://code.hcharts.cn/rench...

Answer 1

谢谢两位提供的思路，已经解决：

var myCharts = echarts.init(document.getElementById("section"));

var triggerAction = function(action, selected) {
  legend = [];

  for (name in selected) {
    if (selected.hasOwnProperty(name)) {
      legend.push({
        name: name
      });
    }
  }

  myCharts.dispatchAction({
    type: action,
    batch: legend
  });
};

//是否只选择一个图例
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 onOff = true;

myCharts.on('legendselectchanged', function(obj) {
  var selected = obj.selected;
  var legend = obj.name;
  // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
  // 使得 无 selected 对象
  if (selected != undefined && isFirstUnSelect(selected) && onOff) {
    triggerAction('legendToggleSelect', selected);
    onOff = false;
  }
});

Answer 2

看看 事件那块的API 类似这个legendselectchanged

Answer 3

legendselected：例组件用legendSelect 图例选中后的事件，即点击显示该图例时，触发就生效。