Vue + SpreadJS 实现高性能数据展示与分析

Vue + SpreadJS 实现高性能数据展示与分析

在前端开发领域，表格一直都是一个高频使用的组件，尤其是在中后台和数据分析场景下。但当一屏展示数据超过 1000 条数据记录时，会出现浏览器卡顿等问题，严重影响客户体验。为解决这些性能问题，不少组件也提出了相关的解决方案，以 ElementPlus 为例，提出了虚拟化表格的概念来流畅的展示更多的数据，但该功能目前仍在测试中，投入生产环境可能会有一定的风险，因此本文不做更多的介绍，大家有兴趣可以参考虚拟化表格。

本文介绍一款纯前端的表格控件SpreadJS，具有高度类 Excel 操作行为及高性能的数据展示处理性能，在类 Excel 业务需求实现及大数据展示方面有较好的使用体验。相关的性能体验可以参考：性能演示应用。同时，官方具备大量的学习资料及成熟的技术配套服务，只要掌握基础的前端开发技能，就可以轻松上手 SpreadJS。本文以 Vue3 框架为例，简要介绍如何使用 SpreadJS 来做数据分析及可视化展示。SpreadJS 如何与 Vue3 框架继承可参考：

Vue3构建电子表格；

Vue3集成SpreadJS产品文档。

产品集成完成之后，接下来我们一起来了解 SpreadJS 中关于数据展示及可视化分析的相关功能点。

（1）数据透视表

SpreadJS 作为类 Excel 表格控件，具备与 Excel 高度一致的功能，而在 Excel 中，用来做数据分析的一个关键功能就是数据透视表。同理，在 SpreadJS 中也可以使用透视表来做数据分析。关于透视表的概念，如果不理解可做参考：

创建数据透视表以分析工作表数据；

手把手教你玩转 Excel 数据透视表

SpreadJS 对透视表提供了 UI 操作与 API，我们可以根据实际需求选择使用 UI 还是 API。UI 操作上与 Excel 操作透视表一致，如下所示，我们可以导入一张包含透视数据源的 excel 文件，之后基于该数据源，选择行列分析维度，生成目标透视表：

怎么样，是不是操作十分简单，秩序简单几步，就可以将 excel 的透视表功能迁移到 Web 端。作为前端控件，SpreadJS 也提供了 API 来支持透视表展示，详细的 API 说明可参考学习指南-透视表。

（2）集算表

集算表是 SpreadJS V15.0 之后提出的一个新的功能点，该功能可根据请求接口返回数据，快速生成结构化视图展示。支持数据验证，条件格式等常见 Excel 操作，并且多数据源之间支持连接，类似于数据库表之间的外联关系。集算表 UI 操作如下：

集算表-自动同步

视频中的所有接口由 Postman 模拟生成，实际项目中，可根据自己的业务情况填写接口。作为前端控件，SpreadJS 不会限制接口返回数据来源，可以来自关系型数据库 MySQL，SQL Server，也可以来自 Redis、Mongodb 等其它非关系型数据库，当然，也可以来自 OA，CRM 等其它业务系统。

数据到达前端之后，也可对有关联关系的两张表做连接展示分析，具体操作如下所示：

动图中，演示的两张表对应的数据请求接口分别是：

主表： https://demodata.grapecity.com/northwind/api/v1/Orders

客户信息表：https://demodata.grapecity.com/northwind/api/v1/customers

如果想进一步了解集算表 API 实现，可参考学习指南-集算表。通过字段列关联生成的视图，如果满足透视表数据源要求，可进一步选择插入透视表进一步做汇总，统计等数据分析。