前端万级数据量的图表中,数据应该怎么获取?

2022-05-05 13:29:55 +08:00
 kiritoxf

数据量大概两三万左右,前端是 react + echarts (或者 d3 ),后端是 java

由于业务需求,这些数据都是有意义的,要都显示出来

我的想法是调一个接口一次性把所有数据全返回来

但是后端说微服务不能这么干,内存也装不下什么的,让我 500 条一次,手动依次获取全部数据

我就很迷茫了,以前也没这么做过不知道对不对

2823 次点击
所在节点    前端开发
30 条回复
aragakiyuii
2022-05-05 13:34:55 +08:00
目测数据结构不会很复杂(猜的)两三万占不了多少的
rapperx2
2022-05-05 13:35:50 +08:00
怎么获取不重要,重要的是你前端怎么显示
kiritoxf
2022-05-05 13:37:45 +08:00
每条数据除了一些基本信息(字符串什么的)外,还会有一个 300 多个浮点数的数组
@aragakiyuii
kiritoxf
2022-05-05 13:38:46 +08:00
@rapperx2 是个散点图,可以缩放,由于某些原因这些数据之间的位置是有意义的,所以要都拿出来
lessMonologue
2022-05-05 13:40:04 +08:00
不能自己多调用几次后端接口然后拼接起来吗
murmur
2022-05-05 13:42:08 +08:00
抽样呗,3w 个点到一个图上都一坨糊了,抽到 3000 个点跟 3w 个看上去也是一坨 shi 糊
ss098
2022-05-05 13:42:22 +08:00
后端确实不适合一次性输出所有数据,还是前端分页自己拼接比较好。
wonderfulcxm
2022-05-05 13:44:14 +08:00
可以同时发几条 ajax 请求,并行下载,然后把结果组装。就好像开启了迅雷的多线程下载,肯定比一次性取全部数据快。
rapperx2
2022-05-05 13:44:35 +08:00
@kiritoxf 那你应该让后端一次性提供给你啊,不能只讲数量,也要看数据包大小。包大就压缩传输,几万条数据只取需要的字段能占多大内存。实在不行,缩写字段等方式,这些应该后端来思考吧
nieboqiang
2022-05-05 13:51:22 +08:00
@lessMonologue 不太合理,过程过多,出错的概率越大。
lessMonologue
2022-05-05 13:57:18 +08:00
@nieboqiang 合理。这个也不是说类似订单状态的流转啥的多次请求,就单纯的读数据,合理的很。如果前端不想做,那就后端再写一个聚合接口拼装数据。
netnr
2022-05-05 13:59:52 +08:00
后端字符串打包压缩为 ZIP ,前端下载解压读取解析,例大文件导出 https://www.netnr.com/run/code/5328511666506473654
rabbbit
2022-05-05 14:00:48 +08:00
散点图要是全显示 30000/500, 前端请求 60 次, 要分组也是 5000 一组吧?

啥业务?
必须全部输出展示?
内网用还是外网用?
是否在意流量?
业务不同设计也不同
rabbbit
2022-05-05 14:03:51 +08:00
那个 300 多的数组就别一起发过来了, 用户点击的时候发 id 查吧.
rabbbit
2022-05-05 14:11:17 +08:00
如果做的 OA 之类的内网用根本没几个用户的系统,纯粹是后端偷懒不想加接口那就直接传 {size: 999999999} 吧.
kiritoxf
2022-05-05 14:24:09 +08:00
@rabbbit 300 多的数组有用,要用这些 300 * 3 万 的浮点数来计算出具体的横纵坐标

现在确实算是内网,但是将来说不准,可能是为了考虑全面吧
kiritoxf
2022-05-05 14:28:53 +08:00
我现在打算用类似如下的伪代码来解决

不并发是因为后端说同时发一堆请求不好,好像对微服务有影响什么的

```
const fetchListData = (page: number) => {
getData({ page, pageSize: 5000 }).then((res) => {
// 自己拼一个数组
myList.push(res.list);
// 如果当前页还没到总页数,就 page+1 再获取一次
if (res.page !== res.totalPage) {
fetchListData(page + 1);
} else {
// 初始化图表
}
})
}
```
falcon05
2022-05-05 14:31:13 +08:00
@netnr #11 web server 一般都可以配置根据 content-encoding: gzip 返回压缩后的内容,浏览器解压是也是自动的啊,为什么还要前端解压缩?
rabbbit
2022-05-05 14:43:35 +08:00
@kiritoxf
还是先别管后端咋传了,先搞个{ size: 999999999 }把数据展示出来再说.1 千万前端能撑住吗?
内存装不下倒是有点扯
jy02534655
2022-05-05 14:53:51 +08:00
echarts 本身是有配置支持大数据量优化的,至于怎么取数据上面已经说了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/850927

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX