原文首發於我的個人網站： 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/exam…

測試代碼(自行變動數據量和末了兩行解釋)：

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
    }],
};