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 < 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!

已标记关键词 清除标记
我在VS上copy了ECharts中的一个示例(如下),这个示例本应是动态更新的,但是我的就执行不了,原因是myChart.setOption(option);不能像示例中一样放在最后面, 要放在clearInterval(app.timeTicket);这句话前面才能显示出来图表,但是这样显示出来的图表就不会自动更新了,这是怎么回事?求高手解答 ``` var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data:['最新成交价', '预购队列'] }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, dataZoom: { show: false, start: 0, end: 100 }, xAxis: [ { type: 'category', boundaryGap: true, data: (function (){ var now = new Date(); var res = []; var len = 10; while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); now = new Date(now - 2000); } return res; })() }, { type: 'category', boundaryGap: true, data: (function (){ var res = []; var len = 10; while (len--) { res.push(len + 1); } return res; })() } ], yAxis: [ { type: 'value', scale: true, name: '价格', max: 30, min: 0, boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, name: '预购量', max: 1200, min: 0, boundaryGap: [0.2, 0.2] } ], series: [ { name:'预购队列', type:'bar', xAxisIndex: 1, yAxisIndex: 1, data:(function (){ var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; })() }, { name:'最新成交价', type:'line', data:(function (){ var res = []; var len = 0; while (len < 10) { res.push((Math.random()*10 + 5).toFixed(1) - 0); len++; } return res; })() } ] }; clearInterval(app.timeTicket); app.count = 11; app.timeTicket = setInterval(function (){ axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); var data0 = option.series[0].data; var data1 = option.series[1].data; data0.shift(); data0.push(Math.round(Math.random() * 1000)); data1.shift(); data1.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); option.xAxis[1].data.shift(); option.xAxis[1].data.push(app.count++); myChart.setOption(option); }, 2100); ```
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页