echarts有l(wèi)egend控件可以控制多個(gè)折線圖之間的切換

legend: {

data: ['財(cái)經(jīng)','娛樂(lè)','社會(huì)'],

selectedMode: "single", //單選模式，每次出現(xiàn)一條折線圖

y: y, //由于需要自適應(yīng)，此值用變量動(dòng)態(tài)改變

right: 10,

inactiveColor: "#ADD9FF", //選中狀態(tài)的顏色

textStyle: {

color: "#00FFFF"

}

},

其實(shí)legend里面有個(gè)選中屬性

默認(rèn)選中第一項(xiàng)“財(cái)經(jīng)”

如果選中娛樂(lè)這一項(xiàng)

legend可以設(shè)置為

legend: {

data: ['財(cái)經(jīng)','娛樂(lè)','社會(huì)'],

selectedMode: "single",

selected:{

'財(cái)經(jīng)':false,

'娛樂(lè)':true,

'社會(huì)':false

}

y: y,

right: 10,

inactiveColor: "#ADD9FF",

textStyle: {

color: "#00FFFF"

}

},

如果要讓他自動(dòng)切換折線，就要設(shè)置一個(gè)定時(shí)器動(dòng)態(tài)的改變legend中的selected中的值

/**

* 動(dòng)畫(huà)線型圖

*/

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(); // 清空原來(lái)的折線圖

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)

}

總結(jié)

以上是生活随笔為你收集整理的echart 折线从左到右动画效果_echarts之自动切换折线图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。