資訊專欄INFORMATION COLUMN
摘要：原文首發(fā)于我的個(gè)人網(wǎng)站卡頓問(wèn)題出現(xiàn)背景中主要耗能設(shè)置為折線圖軸數(shù)據(jù)量控件最開(kāi)始軸為類目軸，最近根據(jù)情況想改為時(shí)間軸卡頓主要表現(xiàn)在顯示和拖動(dòng)時(shí)。初步分析是為導(dǎo)致，因?yàn)榍袚Q回后就卡頓問(wèn)題消失。
原文首發(fā)于我的個(gè)人網(wǎng)站： https://lonhon.top/
卡頓問(wèn)題出現(xiàn)背景：
ECharts^4.0.4 + Vue^2.5.9
option中主要耗能設(shè)置為：折線圖 + Y軸2 + series3 + 數(shù)據(jù)量1300*3 + dataZoom控件
最開(kāi)始X軸type為類目軸category，最近根據(jù)情況想改為時(shí)間軸time
卡頓主要表現(xiàn)在tooltip顯示和拖動(dòng)dataZoom時(shí)。
上周在使用的時(shí)候發(fā)現(xiàn)號(hào)稱支持千萬(wàn)數(shù)據(jù)流暢顯示的EC居然在1300*3的數(shù)據(jù)下變得很卡，一點(diǎn)不科學(xué)。
初步分析是xAxis.type為time導(dǎo)致，因?yàn)榍袚Q回category后就卡頓問(wèn)題消失。
提了issue暫時(shí)無(wú)果，后來(lái)分析了一波找到以下 解決辦法 ：
series中設(shè)置 showSymbol: false, hoverAnimation: false
option中設(shè)置 animation: false, animationDurationUpdate: 0
得出結(jié)論是xAxis.type:"time" 結(jié)合 series.showSymbol:true 導(dǎo)致圖表卡頓。
測(cè)試地址： http://echarts.baidu.com/exam...
測(cè)試代碼(自行更改數(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: "動(dòng)態(tài)數(shù)據(jù) + 時(shí)間坐標(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94838.html
摘要：原文首發(fā)于我的個(gè)人網(wǎng)站卡頓問(wèn)題出現(xiàn)背景中主要耗能設(shè)置為折線圖軸數(shù)據(jù)量控件最開(kāi)始軸為類目軸，最近根據(jù)情況想改為時(shí)間軸卡頓主要表現(xiàn)在顯示和拖動(dòng)時(shí)。初步分析是為導(dǎo)致，因?yàn)榍袚Q回后就卡頓問(wèn)題消失。 原文首發(fā)于我的個(gè)人網(wǎng)站： https://lonhon.top/ 卡頓問(wèn)題出現(xiàn)背景： ECharts^4.0.4 + Vue^2.5.9 option中主要耗能設(shè)置為：折線圖 + Y軸2 + se...
摘要：項(xiàng)目有一個(gè)需求，定時(shí)顯示隱藏圖標(biāo)，剛開(kāi)始是圖表顯示正常。原因可能是讀取不到隱藏的高寬。在可視區(qū)域變化時(shí)重新調(diào)整，這時(shí)候如果處于隱藏狀態(tài)，那么在時(shí)就讀取不到節(jié)點(diǎn)的寬高，圖表就無(wú)法顯示。 項(xiàng)目有一個(gè)需求，定時(shí)顯示隱藏echarts圖標(biāo)，剛開(kāi)始dom是display:block;圖表顯示正常。等到dom隱藏再顯示的時(shí)候圖表還是正常，很好沒(méi)有bug。可是當(dāng)我在dom處于display:none...
摘要：正如標(biāo)題所說(shuō)，這是的一遍填坑，如果你是一些的配置的話可以閱讀的官網(wǎng)配置信息。我想官網(wǎng)中關(guān)于的動(dòng)態(tài)數(shù)據(jù)案例說(shuō)的也夠詳細(xì)，但是它們的并不是我想要的格式，這時(shí)候怎么辦，我們可以通過(guò)和和達(dá)到設(shè)置坐標(biāo)的效果，通過(guò)來(lái)設(shè)置間距。 正如標(biāo)題所說(shuō)，這是Echarts的一遍填坑，如果你是一些echart的配置的話可以閱讀http://echarts.baidu.com/opti...的官網(wǎng)配置信息。今天我...
閱讀 3762·2021-09-22 15:17
閱讀 1946·2021-09-22 14:59
閱讀 2346·2020-12-03 17:00
閱讀 3209·2019-08-30 15:55
閱讀 482·2019-08-30 11:23
閱讀 3487·2019-08-29 13:56
閱讀 518·2019-08-29 12:54
閱讀 2257·2019-08-29 12:49
