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比較熟的，歡迎留言賜教，謝謝。
3、ECharts 4 新提供了 數據集（dataset）組件來單獨聲明數據
radar: [ { indicator: [ {text: '規范', max: 100}, {text: '性能', max: 100}, {text: '高可用', max: 100}, {text: '安全', max: 100}, {text:'穩定',max:100} ], center: ['50%','50%'], radius: 80 } ], dataset:{ dimensions:['normative','performance','recovery','safety','stability'], source:[this.radarData] }, series:[ { type: 'radar', tooltip: { trigger: 'item' }, itemStyle: {normal: {areaStyle: {type: 'default'}}}, name:'指標值'
/*data: [ { //value: this.radarValues, name: '指標值' } ]*/ } ]
//數據
Mock.mock(/\/api\/getSuggestion/,'get',{ 'normative':'@integer(1,100)', 'performance':'@integer(1,100)', 'recovery':'@integer(1,100)', 'safety':'@integer(1,100)', 'stability':'@integer(1,100)' })
4、當y軸為百分比的時候，通常需要設置最大值為100%，如果不設置則有時候會成120，這點需要增加配置
坐標軸刻度最大值。
可以設置成特殊值 'dataMax'，此時取數據在該軸上的最大值作為最大刻度。
不設置時會自動計算最大值保證坐標軸刻度的均勻分布。
在類目軸中，也可以設置為類目的序數（如類目軸 data: ['類A', '類B', '類C'] 中，序數 2 表示 '類C'。也可以設置為負數，如 -3）。
當設置成 function 形式時，可以根據計算得出的數據最大最小值設定坐標軸的最小值。如：
max: function(value) { return value.max - 20; }其中 value 是一個包含 min 和 max 的對象，分別表示數據的最大最小值，這個函數應該返回坐標軸的最大值。
5、利用數組特性，讓series圖形從右側出來
var array = []; array.length = 50; array.push(1); array //(51) [empty × 50, 1]
array[0] //undefined
array[2] //undefined
array[50] //1
如果圖形默認只能顯示50個點，那么先設置series的data的length為50，那么前50個點就會沒有數據，顯示不了圖片。這樣就利於做動畫，讓圖形從右側出來，慢慢往左移動