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

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)

}