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

Posted 2022-12-28 葡萄城技术团队

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