测试目的
Echarts折线图，大量数据异步加载导致dataZoom组件拖动缩放时间轴卡顿
测试环境
- 本地json，28006条数据；
- ajax异步加载；
$(function () { var dataUrl = "data/data.json" $.ajax({ type: "get", url: dataUrl, async: true, data: {}, dataType: "json", success: function (res) { var exData = res.data; console.log(exData); var lineData = [], LineName = []; if (exData.length > 0) { for (var i = 0; i < exData.length; i++) { lineData.push(exData[i].value); LineName.push(exData[i].time.slice(11, 16)); } } //调用封装函数; getLine(LineName, lineData); }, error: function (err) { console.log(err + "请求数据失败!"); } }); })
解决方案
series-line. samplingstring
折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。
可选：
‘average’ 取过滤点的平均值
‘max’ 取过滤点的最大值
‘min’ 取过滤点的最小值
‘sum’ 取过滤点的和
效果比较
未采用sampling降采样策略
sampling: ‘average’
采用sampling降采样策略
结论说明
- 加载数据大小相同，加载时间基本相同；
- 使用sampling降采样策略，dataZoom组件拖动缩放时间轴卡顿明显解决。
其他配合条件
根据实际情况，可以将echarts不必要的动画和标志图形关闭，已达到显示数据为主，效果为辅的目的。
series-line. showAllSymbol = ‘auto’
只在主轴为类目轴（axis.type 为 ‘category’）时有效。 可选值：
‘auto’：默认，如果有足够空间则显示标志图形，否则随主轴标签间隔隐藏策略。
true：显示所有图形。
false：随主轴标签间隔隐藏策略。
series-line. animation = true
是否开启动画。
series-line. showSymbol = true 是否显示 symbol, 如果 false 则只有在 tooltip
hover 的时候显示。
方案代码
series: [{ data: lineData, //showSymbol: false, sampling: 'average',//降采样策略 //showAllSymbol: false, type: 'line' }]
Done！
