Echarts高级进阶教程(1)：异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案

测试目的

Echarts折线图，大量数据异步加载导致dataZoom组件拖动缩放时间轴卡顿

测试环境

1. 本地json，28006条数据；
   
2. 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降采样策略

结论说明

1. 加载数据大小相同，加载时间基本相同；
2. 使用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！