原文首发于我的个人网站： https://lonhon.top/卡顿问题出现背景：ECharts^4.0.4 + Vue^2.5.9option中主要耗能设置为：折线图 + Y轴2 + series3 + 数据量1300*3 + dataZoom控件最开始X轴type为类目轴category，最近根据情况想改为时间轴time卡顿主要表现在tooltip显示和拖动dataZoom时。上周在使用的时候发现号称支持千万数据流畅显示的EC居然在1300*3的数据下变得很卡，一点不科学。初步分析是xAxis.type为time导致，因为切换回category后就卡顿问题消失。提了issue暂时无果，后来分析了一波找到以下 解决办法 ：series中设置 showSymbol: false, hoverAnimation: falseoption中设置 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 }],};
