原文首發于我的個人網站： 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}], };

轉載于:https://www.cnblogs.com/lonhon/p/9013051.html

總結

以上是生活随笔為你收集整理的ECharts xAxis.type='time'时间轴时卡顿问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。