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'时间轴时卡顿问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。