共计 1388 个字符,预计需要花费 4 分钟才能阅读完成。
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.co…
客户信息表:https://demodata.grapecity.co…
如果想进一步理解集算表 API 实现,可参考学习指南 - 集算表。通过字段列关联生成的视图,如果满足透视表数据源要求,可进一步抉择插入透视表进一步做汇总,统计等数据分析。