这期内容当中小编将会给大家带来有关appendData异步加载大数据量分片加载数据和增量渲染的解决方案是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都创新互联公司长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为蚌埠企业提供专业的成都网站建设、网站制作,蚌埠网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
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"]]
67ms的加载速度,是非常能够接受的;
由于data.json文件过大,导致电脑无法打开,故20万的数据无能如愿测试;
如果使用for循环来测试,则for循环的时间必将计算再内,标准不统一,影响两次测试的结果,无法说明问题;
目前测试结果来看,Echarts的宣传和性能基本上是一致的。但是在项目的开发中,加载慢的很大部分的原因,应该是API接口获取数据和DOM渲染导致的。
appendData对折线图起作用吗?:Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
上述就是小编为大家分享的appendData异步加载大数据量分片加载数据和增量渲染的解决方案是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。