ECharts xAxis.type='time'时间轴时卡顿问题

原文首发于我的个人网站： 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'时间轴时卡顿问题相关推荐

长虹电视android优化要多久,长虹电视时间久了卡顿如何解决？最新优化教程详解...
原标题:长虹电视时间久了卡顿如何解决?最新优化教程详解长虹电视视频播放卡怎么办?对于喜爱追剧的用户们来说,播放卡顿往往是用户们最常碰到的问题了.一般情况下,播放卡顿往往伴随着黑屏.无响应或死机等多种 ...
vue + Echarts 填坑记（Echarts数据量大，导致浏览器卡顿）
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
Visual Studio 2013运行时卡顿 CPU占用超高的解决方法
文章原始连接: http://feotech.com/?p=116 Visual Studio 2013运行时卡顿 CPU占用超高的解决方法使用Visual C++ 编写程序时发现输入代码时特别卡顿 ...
eplan备份时卡顿_EPLAN卡顿了怎么办？
教程 EPLAN卡顿了怎么办? 编辑丨钻石海出品丨电气CAD论坛日常工作中,一款顺手的工具软件可是保证咱电气工程师生产力的最重要因素之一,然而随着系统升级.软件升级.工作强度升级,唯一没有升级的除了 ...
建筑CAD软件导出超大T3或T8格式图纸时卡顿怎么办？
有些设计师小伙伴,在使用浩辰CAD建筑软件画完图后,图纸很大,想要将其导出为T3或T8格式的时候,有时候会出现卡顿的现象,那该如何解决呢?本文小编就来给大家分享两种建筑CAD软件导出超大T3或T8格式 ...
android电视直播卡顿,电视直播时卡顿，除了网速还有哪些问题要解决？
原标题:电视直播时卡顿,除了网速还有哪些问题要解决? 相信很多朋友都认为盒子卡顿全是网速造成的?但是事实确实如此吗?经过小编亲测发现,不同带宽下,电视盒子在不同时段均出现卡顿现象.因此说明电视直播卡顿 ...
关于Office软件中Word输入时卡顿无反应的解决办法！
最近在安装office2013时遇到了这样一个问题,就是在激活office之后,打开Word输入内容时十分卡顿.也是狂搜网上各种办法,有说改注册表的,也有说在office选项里设置什么输入法的,全试了 ...
国产兼容三菱FX3U源码，最新一波bug修改，修改监控时卡顿问题
国产兼容三菱FX3U源码,最新一波bug修改,修改监控时卡顿问题.8位口令功能,程序消除功能,定时器特殊情况下不运行问题.带modbus-tcp功能,实时时钟,深度测试后,修改一些主要bug后,稳定 ...
国产兼容三菱FX3U源码，修改监控时卡顿问题。 8位口令功能，程序消除功能
国产兼容三菱FX3U源码,最新一波bug修改,修改监控时卡顿问题. 8位口令功能,程序消除功能,定时器特殊情况下不运行问题. 带modbus-tcp功能,实时时钟,深度测试后,修改一些主要bug后,稳 ...

ECharts xAxis.type='time'时间轴时卡顿问题

ECharts xAxis.type='time'时间轴时卡顿问题相关推荐

最新文章

热门文章