SpreadJS 集算表联动数据透视表，高效实现前端数据多维分析

[GrapeCityChina]

在做一些财务、供应链、资产管理等系统时，由于业务人员线下都是采用 Excel 来完成的，因此就需要将 Excel 中业务人员使用的功能都能在 Web 端系统实现，整体上的实现方案有三种：

1. 完全自研一套具备 Excel 功能的组件；
2. 使用成品软件，例如 office 365 ，Wps ，等；
3. 使用类 Excel 控件；

在实际调研中发现，采用方案一，自研成本过高，例如 Excel 中每一种公式函数的实现，跨工作表计算链路分析等等，这些在实现上都有较大的难度。其次就是，自研系统的操作习惯不一定与 Excel 类似，导致后续业务人员在使用时，需要一定的培训成本。

方案二对原有 Excel 功能不再需要研发投入，但由于软件类具有较强的封装性，而实际 Web 系统中的业务需求又需要能结合实际的应用场景做一些定制化功能。最常见的就是表单保护，软件类和权限对接时，最小粒度只能控制到表单级别，无法做到控制当前用户下，不能编辑某几个单元格。软件的高封装性无法应对系统中大量的定制化需求。

相对来说，选择类 Excel 控件是最完美的策略了，它不需要研发人员自研 Excel 的功能，又提供了大量的 API 支持扩展开发。

SpreadJS是一款纯前端类 Excel 表格控件，支持前端主流框架，可轻松嵌入自己的 Web 系统中。作为一款类 Excel 表格控件，SpreadJS 天然具备 Excel 的大部分功能，例如数据验证、条件格式、图形图表、公式函数、透视表等等。除此之外，为了便于 Web 系统的数据设置和提取，SpreadJS 也提出了数据绑定及集算表等方式，来简化开发成本。本文围绕数据设置及分析，整合 SpreadJS 中集算表及数据透视表功能，提供一种纯前端高效能数据多维分析方案。

SpreadJS 与框架集成方式可参考下面的文章：

1. Vue 集成 SpreadJS；
2. React 集成 SpreadJS。

Web 系统中，要对数据做分析处理，首先需要将要做分析处理的数据查询到前端。SpreadJS 中，集算表是一个具有网状行为和电子表格用户界面的快速数据绑定视图，可以对接具体的 API 接口，实现数据的增删改查。API 层面实现可参考学习指南-集算表，UI 层面的操作可以参考下面的视频教程：

1. 集算表数据自动同步；
2. 集算表数据批量提交。

本文侧重做数据分析，可以暂时只关注集算表数据查询接口，SpreadJS 在线体验地址中，创建集算表时，提供了默认的数据查询接口。本文中，测试接口由 Postman 模拟生成，对应的接口为“https://9a288081-e4c6-4468-8228-b2fefad890c1.mock.pstmn.io/getOrder”，返回数据字段为“list”,创建集算表的过程如下：

创建完集算表之后，本身集算表就具备一定的分析统计能力，可以通过分组，求和函数来实现部分数据分析与统计：

但这种数据统计分析如果相对数据透视图来说，设置方式略微复杂，并且与 Excel 使用方式并不一致，对业务人员来说，存在一定的挑战。我们可以将集算表用来做数据展示的快捷手段，后续的数据分析依然借助生成透视表来完成，SpreadJS 基于计算表，可直接创建数据透视表：

使用这种方案，我们就可以快速的对接数据，在纯前端的环境下实现数据分析及统计需求。