Vue + SpreadJS 实现高性能数据展示与分析
Vue + SpreadJS 实现高性能数据展示与分析
在前端开发领域,表格一直都是一个高频使用的组件,尤其是在中后台和数据分析场景下。但当一屏展示数据超过1000条数据记录时,会出现浏览器卡顿等问题,严重影响客户体验。为解决这些性能问题,不少组件也提出了相关的解决方案,以ElementPlus为例,提出了虚拟化表格的概念来流畅的展示更多的数据,但该功能目前仍在测试中,投入生产环境可能会有一定的风险,因此本文不做更多的介绍,大家有兴趣可以参考虚拟化表格。
本文介绍一款纯前端的表格控件SpreadJS,具有高度类Excel操作行为及高性能的数据展示处理性能,在类Excel业务需求实现及大数据展示方面有较好的使用体验。相关的性能体验可以参考:性能演示应用。同时,官方具备大量的学习资料及成熟的技术配套服务,只要掌握基础的前端开发技能,就可以轻松上手SpreadJS。本文以Vue3框架为例,简要介绍如何使用SpreadJS来做数据分析及可视化展示。SpreadJS如何与Vue3框架继承可参考:
产品集成完成之后,接下来我们一起来了解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实现,可参考学习指南-集算表。通过字段列关联生成的视图,如果满足透视表数据源要求,可进一步选择插入透视表进一步做汇总,统计等数据分析。
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- Vue专题 05_详解vue生命周期的每个节点
- js JavaScript vue 时间戳 转换 日期 YYYY-MM-DD hh:mm:ss 简洁写法
- Vue substring截取字符串报错
- vue-router的二次封装
- vue(16)vue-cli创建项目以及项目结构解析[通俗易懂]
- vue父组件操作子组件的方法_vue父组件获取子组件数据
- vue监听页面刷新事件_vue监听数据变化自动刷新
- 常用日期时间控件_vue时间控件
- 记录 vue-cli3 配置uat环境 遇到的打包问题[通俗易懂]
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Object.assign(this.$data, this.$options.data())-vue清空数据
- linux下快速部署Vue项目(linux部署vue)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- Vue中触发Redis订阅通知(vue中订阅redis)