ECharts xAxis.type='time'時間軸時卡頓問題
阿新 • • 發佈:2018-05-09
rip 坐標軸 urn UNC htm var EDA () dom
原文首發於我的個人網站: https://lonhon.top/
卡頓問題出現背景:
- ECharts^4.0.4 + Vue^2.5.9
- option中主要耗能設置為:折線圖 + Y軸2 + series3 + 數據量1300*3 + dataZoom控件
- 最開始X軸type為類目軸category,最近根據情況想改為時間軸time
卡頓主要表現在tooltip顯示和拖動dataZoom時。
上周在使用的時候發現號稱支持千萬數據流暢顯示的EC居然在1300*3的數據下變得很卡,一點不科學。
初步分析是xAxis.type為time導致,因為切換回category後就卡頓問題消失。
提了issue暫時無果,後來分析了一波找到以下 ** 解決辦法 ** :
- series中設置 showSymbol: false, hoverAnimation: false
- option中設置 animation: false, animationDurationUpdate: 0
得出結論是xAxis.type:‘time‘ 結合 series.showSymbol:true 導致圖表卡頓。
測試地址: http://echarts.baidu.com/examples/editor.html?c=dynamic-data2
測試代碼(自行更改數據量和最後兩行註釋):
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join(‘/‘),
Math.round(value)
]
}
}
var data = [], data1 = [], timeline = [];
var now = +new Date (1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 4000; i++) {
data.push(randomData());
}
option = {
title: {
text: ‘動態數據 + 時間坐標軸‘
},
tooltip: {
trigger: ‘axis‘
},
xAxis: {
type: ‘time‘
},
yAxis: [{
type: ‘value‘,
boundaryGap: [0, ‘100%‘]
},{
type: ‘value‘,
boundaryGap: [0, ‘100%‘]
}],
series: [{
name: ‘模擬數據‘,
type: ‘line‘,
data: data,
// showSymbol: false,
// hoverAnimation: false
}],
};
ECharts xAxis.type='time'時間軸時卡頓問題