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)
}
