ECharts xAxis.type='time'時間軸時卡頓問題

Fundebug 發布于2019-08-02 10:23 / 2238人閱讀

摘要：原文首發于我的個人網站卡頓問題出現背景中主要耗能設置為折線圖軸數據量控件最開始軸為類目軸，最近根據情況想改為時間軸卡頓主要表現在顯示和拖動時。初步分析是為導致，因為切換回后就卡頓問題消失。

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

GPU云服務器云服務器軸時卡頓 attr&039&039checked&039&039 given&039&039 php游戲代碼&039&039

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52317.html

ECharts xAxis.type=&#039;time&#039;時間軸時卡頓問題

摘要：原文首發于我的個人網站卡頓問題出現背景中主要耗能設置為折線圖軸數據量控件最開始軸為類目軸，最近根據情況想改為時間軸卡頓主要表現在顯示和拖動時。初步分析是為導致，因為切換回后就卡頓問題消失。原文首發于我的個人網站： https://lonhon.top/ 卡頓問題出現背景： ECharts^4.0.4 + Vue^2.5.9 option中主要耗能設置為：折線圖 + Y軸2 + se...

happyhuangjinjin 2019-08-22 17:05 評論0 收藏0
echarts圖表顯示隱藏 Can&#039;t get dom width or height

摘要：項目有一個需求，定時顯示隱藏圖標，剛開始是圖表顯示正常。原因可能是讀取不到隱藏的高寬。在可視區域變化時重新調整，這時候如果處于隱藏狀態，那么在時就讀取不到節點的寬高，圖表就無法顯示。項目有一個需求，定時顯示隱藏echarts圖標，剛開始dom是display:block;圖表顯示正常。等到dom隱藏再顯示的時候圖表還是正常，很好沒有bug。可是當我在dom處于display:none...

I_Am 2019-08-26 13:48 評論0 收藏0
關于Echarts的填坑之旅

摘要：正如標題所說，這是的一遍填坑，如果你是一些的配置的話可以閱讀的官網配置信息。我想官網中關于的動態數據案例說的也夠詳細，但是它們的并不是我想要的格式，這時候怎么辦，我們可以通過和和達到設置坐標的效果，通過來設置間距。正如標題所說，這是Echarts的一遍填坑，如果你是一些echart的配置的話可以閱讀http://echarts.baidu.com/opti...的官網配置信息。今天我...

GT 2019-08-20 16:07 評論0 收藏0