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的理由之一。但是在实际开发中，该场景的实现需要多种条件的配合才可以的：
- 大数据量的文件生成时间；
- API接口大数据量的读取时间；
- ajax获取数据后，数据格式的处理时间；
- DOM的渲染时间；
- 在纯实验模式下，如果无需额外加载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 < exData.length; i++) { lineData.push([exData[i].time.slice(11, 19), exData[i].value]); LineName.push(exData[i].time.slice(11, 19)); } } //console.log(lineData); //调用封装函数; getLine(LineName, lineData); }
方案代码
- 设置line的series组件data: []；
series: [{ data: [], type: 'line' }]
- 渲染图表，并监听浏览器大小变化进行自适应
//渲染图表，并监听浏览器大小变化进行自适应; myChart.setOption(option, true); window.addEventListener("resize", function () { myChart.resize(); });
- 分片加载数据和增量渲染
//分片加载数据和增量渲染; myChart.appendData({ seriesIndex: 0, data: lineData }) myChart.resize();
data数据格式为数组：[["08:16:44", "28.1"],["08:16:40", "28.1"]]
结论说明
加载28000条数据时，和常规的加载时间差不多；
- 67ms的加载速度，是非常能够接受的；
加载200000条数据时；
- 由于data.json文件过大，导致电脑无法打开，故20万的数据无能如愿测试；
- 如果使用for循环来测试，则for循环的时间必将计算再内，标准不统一，影响两次测试的结果，无法说明问题；
大胆的测试
目前测试结果来看，Echarts的宣传和性能基本上是一致的。但是在项目的开发中，加载慢的很大部分的原因，应该是API接口获取数据和DOM渲染导致的。
appendData对折线图起作用吗？：Echarts高级进阶教程(3)：appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比，对折线图是无效的
Done！
