echarts使用記錄(二)翻頁,事件
阿新 • • 發佈:2018-05-12
bsp 均可 官方文檔 sel ima dsc n) amp 但是
1、有時候legend比較多的時候,需要做翻頁比較好,有個屬性legend的type屬性設置為scroll,然後animation可以控制動畫,官方文檔均可查。
再就是scrollDataIndex,就是默認從哪一項開始翻頁。
然後有個問題就是雖然legend可以顯示分頁,但是series卻沒法跟隨legend同步,而是全部顯示,這點需要修改,就會涉及另一屬性selected,是個對象,設置name為false就可以選中讓series裏面的線條消失,這是一個思路。
{
‘2018-05-02‘ : false,
‘2018-05-03‘ : false //不想顯示的都設置成false
}
2、再就是echart的事件,如果觸發了某事件,可以通過 myChart.on(‘eventName‘,callback) 獲取事件,下面就是我設置legend翻頁series跟隨legend同步變化的事件監聽
legend: {
data:this.legrend,
type:‘scroll‘,
width:‘700‘,
animation:false,
scrollDataIndex:this.scrollDataIndex,
selected: this.legrendUnSelect
},
myLogLine.on(‘legendScroll ‘,(params) => {
let index = params.scrollDataIndex;
let len = this.series.length;
//後翻頁
if((index + 1)%6 ==0){
this.scrollDataIndex = index + 1;
for(let i=0;i<len;i++){
this.legrendUnSelect[this.series[i].name] = (i > index && i - index <= 6 ) ? true : false;
}
}
//前翻頁
if((index -1)%6 ==0){
this.scrollDataIndex = index - 1;
for(let i=0;i<len;i++){
this.legrendUnSelect[this.series[i].name] = (i+2 > index && i+2 - index <= 6) ? true : false;
}
}
console.log(this.legrendUnSelect)
//myLogLine.setOption(option);
this.drawLine();
})
再一個就是legend我想控制它只顯示幾個,但是一直沒查到方法,試了幾種也不行,這個需要對整個配置項比較清楚,目前沒精力去通讀這個,所以用了一個粗暴的犯法就是設置 legend 的 width 屬性給個固定值,這樣legend就會固定顯示多少個了。如果有讀者對echart比較熟的,歡迎留言賜教,謝謝。
echarts使用記錄(二)翻頁,事件