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

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

2023-07-21 593

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

测试目的

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！