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/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
    }],
};
    原文作者:游龙翔隼
    原文地址: https://segmentfault.com/a/1190000014788832
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞