十万 百万 级数据处理 以及可视化 画图

这两天处理后端返回得数据(数据量比较大 1天就2.3万,并且我们得需求比较特殊相当于一下要画最少10万得点),并且在一个画布内画多个折线图(数量不定);

问题一:可视化工具得寻找

常年使用echarts,用得比较顺手,但是涉及到大量得数据,没有找到很好得支持(可能我没找到),这里推荐 蚂蚁数据可视化 antv G2. 可以承载大数量得数据 ,下面是链接:https://g2.antv.vision/zh/examples/area/stacked/
在这里插入图片描述

注:具体得这么画图这边不多叙述,直接看文档!不过这里个人建议,数据量小得 还是用echarts ,用例多,文档易懂。 G2得文档 说实话看着费劲,例子很少,百度问题得量也不多,慎用把。

G2渲染点 最好是1000个点左右,点一万多个 几万个,渲染DOM压力太大,内存会过大导致页面卡

问题二:数据量过大,接口请求缓慢

数据量过大,接口一次请求肯定是不行得 太大。

第一: 接口分页,单独获取一个数量得接口,分次请求。一次可以5000条或者其他。
第二:数据处理,点过多得时候合并点(合并规则自己定,尽量保持在1000个点左右)。
第三:js 代码优化,虽说js 循环千万次都是小意思,实际开发过程中,js 用在大数据循环多了,时间明显变慢,这里就得优化,能一次循环就一次循环去合并数据,像一些数据得处理可以在返回值中去循环,ajax异步得,这样也能节省时间
第四:增加一个css等待加载数据得动画

十万 百万 级数据处理 以及可视化 画图_第1张图片

你可能感兴趣的:(vue,js,浏览器)