SpreadJS+GcExcel实现自动化数据透视及图表展示

收藏

本帖最后由 Richard.Ma 于 2024-2-4 13:48 编辑

数据透视分析流程

=》前端载入完整的原始数据或者字段列表
=》用户UI操作选择要分析的数据维度，作为行、列维度。
=》前端数据引擎根据用户输入的参数进行数据分析，生成透视表结果
=》对透视或结果的展示以及后续应用

快速在纯前端实现透视表
这里找到了一个SpreadJS纯前端的表格组件，本身已经提供了数据透视插件的功能，基本能覆盖上述需求和痛点。同时，作为一个开发控件，可能很轻松的集成到业务系统中。继续根据需要进行二次定制开发。

先来实现一个简单的数据透视表功能整体流程
1. 使用SpreadJS加载后端的原始数据表，这里通过数据绑定功能可以非常快捷的绑定后端传输过来的数据，生成原始的数据表格。这里加载了1W条数据的销售记录表。
image.png622224120.png

2.通过组件提供数据透视表功能，创建数据透视表，并将透视面板集成到数据分析界面，让用户可以自己选择行列维度字段，以及用于统计计算的值字段。可以看到除了我们需要的基础功能外，也提供了透视结果视图的保存。能将用户设定的参数集合存储为固定的视图。
image.png350675048.png

3. 透视组件创建的数据透视表可以动态展示透视结果
image.png281337584.png

4. 以透视结果创建一个常见的图表，更直观的供用户继续对比分析。
image.png814495849.png

5.

通过GETPIVOTDATA公式，可以动态的获取到某个数据项的统计结果。给程序后续的流程使用。

=GETPIVOTDATA("Sum of quantity",$A$3,"salesperson","姜宇","car","比亚迪")
复制代码

例如上述公式获取到了销售姜宇的比亚迪汽车销售量

来通过动图看一下效果,透视结果生成后，随着后端传输过来的原始数据的更新，透视结果以及图表也会同步更新。
image.png32447813.png

上述效果的具体代码实现，对于开发人员来说，并不复杂。但是在性能方面也有很好的表现，对于十万行原始记录来说。可以快速的生成透视结果。同时，如果用户需要对Excel文件中的历史透视数据进行加载。也能轻松做到。
虽然SpreadJS提供了高性能的前端数据透视引擎。但是如果面对更海量、或者动态更新的原始数据，将数据全部传输到前端来做透视分析并不是最好的选择，你需要考虑前后端传输大量数据的消耗，以及浏览器的性能瓶颈，此时前后端结合是更好的方式

前后端结合实现透视表

这里用到了GCExcel，一款后端的电子表格处理组件，同样可能用来实现透视表功能，更重要的是和此前用到的SpreadJS组件也能兼容以实现前后端结合完成整个分析流程
通过前后端结合方式来实现一个类似的数据透视流程，假定有200W行原始数据。

前端加载仅加载一个空表格，或者头部的1000行数据。为用户选取分析的行列维度字段以及值字段提供依据。在用户输入完成后返回给后端包含这些透视表配置信息的序列化数据。这里的用户输入界面仍可以沿用上面的
后端接收到请求的参数以后，继续在表格加载完整的数据，通过GCExcel提供的数据透视引擎自动进行实际的数据透视分析计算和透视表的生成。
将数据分析结果发送给前端。这里可以根据需要发送透视结果的数据本身，或者包括了数据透视结果的完整表格数据。
对于后端数据会动态更新的场景，可以选择通过websocket给前端推送透视结果。

最后附上对应的前后端demo

vue3-spread-ts.zip (2.32 MB, 下载次数: 348)

		自动登录	找回密码
密码			立即注册

SpreadJS+GcExcel实现自动化数据透视及图表展示

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人