echarts之自动切换折线图

echarts有legend控件可以控制多个折线图之间的切换

legend: {
          data: ['财经','娱乐','社会'],
          selectedMode: "single",     //单选模式，每次出现一条折线图
          y: y,                                  //由于需要自适应，此值用变量动态改变
          right: 10,
          inactiveColor: "#ADD9FF",         //选中状态的颜色
          textStyle: {
            color: "#00FFFF"
          }
        },

其实legend里面有个选中属性
默认选中第一项“财经”
如果选中娱乐这一项
legend可以设置为

legend: {
          data:  ['财经','娱乐','社会'],
          selectedMode: "single",
          selected:{
              '财经':false,
              '娱乐':true,
              '社会':false
          }
          y: y,
          right: 10,
          inactiveColor: "#ADD9FF",
          textStyle: {
            color: "#00FFFF"
          }
        },

如果要让他自动切换折线，就要设置一个定时器动态的改变legend中的selected中的值

    /**
     * 动画线型图
     */
    moveLine: function(){
      this.timer = setTimeout(()=>{
        let option = this.line.getOption();
        let selected = {};
        for(let i=0;i<this.legendData.length;i++){    // this.legendData是legend中data的值，上面是写死的值，做自动切换时不要写死
          if(this.j==i){
            selected[this.legendData[i]] = true;
          }else{
            selected[this.legendData[i]] = false;
          }
        };
        this.line.clear();        // 清空原来的折线图
        option.legend[0].selected = selected;    //更改legend里的selected
        this.line.setOption(option);            //重绘
        this.j += 1;
        if(this.j == this.legendData.length){
          this.j = 0;
        };
        this.moveLine();
      },5000)
    }