国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Fundebug / 2227人閱讀

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

原文首發(fā)于我的個人網(wǎng)站： https://lonhon.top/

卡頓問題出現(xiàn)背景：

ECharts^4.0.4 + Vue^2.5.9

option中主要耗能設(shè)置為：折線圖 + Y軸2 + series3 + 數(shù)據(jù)量1300*3 + dataZoom控件

最開始X軸type為類目軸category，最近根據(jù)情況想改為時間軸time

卡頓主要表現(xiàn)在tooltip顯示和拖動dataZoom時。

上周在使用的時候發(fā)現(xiàn)號稱支持千萬數(shù)據(jù)流暢顯示的EC居然在1300*3的數(shù)據(jù)下變得很卡，一點不科學(xué)。
初步分析是xAxis.type為time導(dǎo)致，因為切換回category后就卡頓問題消失。

提了issue暫時無果，后來分析了一波找到以下 解決辦法 ：

series中設(shè)置 showSymbol: false, hoverAnimation: false

option中設(shè)置 animation: false, animationDurationUpdate: 0

得出結(jié)論是xAxis.type:"time" 結(jié)合 series.showSymbol:true 導(dǎo)致圖表卡頓。

測試地址： http://echarts.baidu.com/exam...

測試代碼(自行更改數(shù)據(jù)量和最后兩行注釋)：

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: "動態(tài)數(shù)據(jù) + 時間坐標(biāo)軸"
    },
    tooltip: {
        trigger: "axis"
    },
    xAxis: {
        type: "time"
    },
    yAxis: [{
        type: "value",
        boundaryGap: [0, "100%"]
    },{
        type: "value",
        boundaryGap: [0, "100%"]
    }],
    series: [{
        name: "模擬數(shù)據(jù)",
        type: "line",
        data: data,
        // showSymbol: false,
        // hoverAnimation: false
    }],
};

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52317.html

相關(guān)文章

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

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

    happyhuangjinjin 評論0 收藏0

  • echarts圖表顯示隱藏 Can&#039;t get dom width or height

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

    I_Am 評論0 收藏0

  • 關(guān)于Echarts的填坑之旅

    摘要：正如標(biāo)題所說，這是的一遍填坑，如果你是一些的配置的話可以閱讀的官網(wǎng)配置信息。我想官網(wǎng)中關(guān)于的動態(tài)數(shù)據(jù)案例說的也夠詳細(xì)，但是它們的并不是我想要的格式，這時候怎么辦，我們可以通過和和達(dá)到設(shè)置坐標(biāo)的效果，通過來設(shè)置間距。 正如標(biāo)題所說，這是Echarts的一遍填坑，如果你是一些echart的配置的話可以閱讀http://echarts.baidu.com/opti...的官網(wǎng)配置信息。今天我...

    GT 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<