echarts有l(wèi)egend控件可以控制多個折線圖之間的切換
legend: {
data: ['財(cái)經(jīng)','娛樂','社會'],
selectedMode: "single", //單選模式裳擎，每次出現(xiàn)一條折線圖
y: y, //由于需要自適應(yīng)枚抵，此值用變量動態(tài)改變
right: 10,
inactiveColor: "#ADD9FF", //選中狀態(tài)的顏色
textStyle: {
color: "#00FFFF"
}
},
其實(shí)legend里面有個選中屬性
默認(rèn)選中第一項(xiàng)“財(cái)經(jīng)”
如果選中娛樂這一項(xiàng)
legend可以設(shè)置為
legend: {
data: ['財(cái)經(jīng)','娛樂','社會'],
selectedMode: "single",
selected:{
'財(cái)經(jīng)':false,
'娛樂':true,
'社會':false
}
y: y,
right: 10,
inactiveColor: "#ADD9FF",
textStyle: {
color: "#00FFFF"
}
},
如果要讓他自動切換折線厕吉，就要設(shè)置一個定時器動態(tài)的改變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)
}
