Echarts高级进阶教程(2)：appendData异步加载大数据量分片加载数据和增量渲染的解决方案

Echarts官方提供分片加载数据和增量渲染的方法appendData，但是目前的资料比较少。现结合Echarts官方和面向CSDN编程的方法，整理解决方案如下：

echartsInstance. appendData
(opts: {
    // 要增加数据的系列序号。
    seriesIndex?: string,
    // 增加的数据。
    data?: Array|TypedArray
}) => string

此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。 注意： 现在不支持 系列（series） 使用dataset 同时使用 appendData，只支持系列使用自己的 series.data 时使用 appendData。 目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts 基础版本的 散点图（scatter） 和线图（lines）。ECharts GL 的 散点图（scatterGL）、线图（linesGL） 和可视化建筑群（polygons3D）。

对"在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染"的理解： 这个是Echarts对外宣传的非常具有诱惑力的口号，也是当初我下定决心学习Echarts的理由之一。但是在实际开发中，该场景的实现需要多种条件的配合才可以的：

1. 大数据量的文件生成时间；
2. API接口大数据量的读取时间；
3. ajax获取数据后，数据格式的处理时间；
4. DOM的渲染时间；
5. 在纯实验模式下，如果无需额外加载UI界面、其他图表的渲染等；

测试目的

Echarts折线图，appendData异步加载大数据量时，分片加载数据和增量渲染的解决方案

测试环境

• 本地json，28006条数据
• ajax异步加载

  success: function (res) {
                var exData = res.data;
                //console.log(exData);
                var lineData = [], LineName = [];
                if (exData.length > 0) {
                    for (var i = 0; i