GoView:基于Vue3的低代码数据可视化开发平台(Gitee最有价值项目)

欢迎加入我们前端技术学习交流群,关注“前端组件开发”公众号,私信可申请入群

GoView:基于Vue3的低代码数据可视化开发平台(Gitee最有价值项目)

摘要:
随着信息技术的不断发展,软件开发的需求日益旺盛。为了提高开发效率,减少开发成本,低代码开发平台应运而生。本文将介绍一款基于Vue3框架的低代码数据可视化开发平台——GoView。该平台采用TypeScript进行类型约束,结合Vite2、NaiveUI、ECharts5、Axios、Pinia2和PlopJS等技术栈,为用户提供了快速构建数据可视化应用的解决方案。

一、引言
低代码开发平台(Low-Code Development Platform, LCDP)旨在通过图形化界面和预置组件,降低软件开发的技术门槛,提高开发效率。GoView作为其中的佼佼者,不仅提供了丰富的图表和页面元素组件,还通过封装和优化技术,实现了高性能、高扩展性的开发体验。

二、技术栈概述

  1. Vue3:作为前端框架的佼佼者,Vue3以其简洁的API、高效的响应式系统和灵活的组件化特性,为GoView提供了坚实的基础。

  2. TypeScript4:TypeScript作为JavaScript的超集,提供了静态类型检查和强大的IDE支持,显著提高了代码质量和开发效率。

  3. Vite2:Vite2作为新一代前端构建工具,通过原生ESM和Rollup打包,实现了快速的冷启动和模块热更新。

  4. NaiveUI:NaiveUI是一套轻量级、美观的Vue3组件库,为GoView提供了丰富的UI组件和友好的开发体验。

  5. ECharts5:ECharts5是一款开源的数据可视化库,支持丰富的图表类型和交互功能,为GoView提供了强大的图表渲染能力。

  6. Axios:Axios是一个基于Promise的HTTP客户端,为GoView提供了高效、稳定的数据请求和响应处理功能。

  7. Pinia2:Pinia2是Vue3的状态管理库,它简化了状态管理的复杂性,提供了直观、易用的API。

  8. PlopJS:PlopJS是一个小型的Node.js模块,它提供了一个简单的交互式CLI,用于帮助开发者快速生成文件、组件和代码片段。

📚 GoView 文档 地址:https://www.mtruning.club/

项目纯前端-Demo 地址:https://vue.mtruning.club/

项目带后端-Demo 地址:https://demo.mtruning.club/

Cloud IDE 代码在线预览地址:https://idegitee.com/dromara/go-view

🤯 后端项目看这里!

后端地址(社区实现,仅供参考):

  • JAVA https://gitee.com/MTrun/go-view-serve (当前使用)

  • .NET https://gitee.com/sun_xiang_yu/go-view-dotnet

  • NODE https://gitee.com/qwdingyu/led

  • Docker 镜像 https://gitee.com/AHEAD4/go-view-docker

  • 接口文档https://docs.apipost.cn (不是最新, 以前端代码为准)

整体介绍
  • 框架:基于 Vue3 框架编写,使用 hooks 写法抽离部分逻辑,使代码结构更加清晰;

  • 类型:使用 TypeScript 进行类型约束,减少未知错误发生概率,可以大胆修改逻辑内容;

  • 性能:多处性能优化,使用页面懒加载、组件动态注册、数据滚动加载等方式,提升页面渲染速度;

  • 存储:拥有本地记忆,部分配置项采用 storage 存储本地,提升使用体验;

  • 封装:项目进行了详细的工具类封装如:路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等

  • 入选 NaiveUI 社区精选资源推荐:查看 NaiveUI 推荐列表

说明文档: 

图片

工作台: 

图片

请求配置: 

图片

数据过滤: 

图片

高级事件编辑: 

图片

自定义组件颜色: 

图片

快捷主页: 

图片

主题色: 

图片

亮白主题: 

图片

主要技术栈为:

名称版本名称版本
Vue3.2.xTypeScript44.6.x
Vite4.2.xNaiveUI2.34.x
ECharts5.3.xPinia2.0.x
详见 package.json😁🥰🤗

开发环境:

名称版本名称版本
node16.16.xnpm8.5.x
pnpm7.1.xwindows11

已完成图表:

分类名称名称名称名称
图表柱状图横向柱状图折线图单/多 折线面积图(渐变色)
*饼图环形图水球图雷达图
*NaiveUI 多种进度散点图对数回归散点图热力图
*漏斗图中国地图高德地图🦊
信息文字渐变文字词云嵌套网页
*图片视频😺🐯
列表滚动排名列表滚动表格🐮🐐
小组件边框-01~13装饰-01~05数字翻牌通用时间
*数字计数倒计时时钟🦁

浏览器支持

开发和测试平台均在 Google 和最新版 EDGE 上完成,暂未测试 IE11 等其它浏览器,如有需求请自行测试与兼容。

安装

请查看文档:https://www.mtruning.club/

三、GoView特点

  1. 封装与抽象:GoView对常见功能和业务逻辑进行了封装和抽象,通过提供一系列基础组件和工具类,降低了开发者的学习成本和工作量。

  2. 性能优化:通过页面懒加载、组件动态注册、数据滚动加载等技术手段,GoView显著提高了页面渲染速度和系统性能。

  3. 本地记忆:GoView支持本地存储功能,部分配置项采用storage存储本地,提升了用户体验和系统稳定性。

  4. 易于扩展:GoView的模块化设计使得开发者可以根据业务需求轻松扩展功能和组件,满足不断变化的业务需求。

四、结论
GoView作为一款基于Vue3的低代码数据可视化开发平台,凭借其强大的技术栈、优秀的性能和丰富的功能,为开发者提供了高效、便捷的数据可视化应用开发体验。未来,随着技术的不断发展和市场需求的不断变化,GoView将继续优化和完善,为更多用户提供更加优质的服务。

欢迎关注我的前端技术微信公众号: 前端组件开发

d848d5658a07453c843277846948c608.png

欢迎加入“前端组件开发学习”交流群,可关注  “前端组件开发” 公众号后,私信后申请入群。

  • 34
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
此版本更新内容包括:Feature :sparkles: 新增 sortBy 和 topAndOther filter (#1378) (#1379) api 新增 responseData 配置 (#1379) 添加季度选择器 Quarter (#1382) Container 支持设置样式 (#1411) 加入 ecStat, Apache ECharts (incubating) 的统计和数据挖掘工具 (#1419) Form 支持 feedback (#1420) 新增仿 antd 主题 (#1421) Enhancement jssdk 支持外部监控路由变化重新切换页面 (#1373) 选择类表单项 selectFirst 跳过 disabled 的选项 (#1393) iconfont 发布到 sdk 里 (#1395) api mock 地址替换 (#1408) Echarts 没数据时显示 loading (#1409) Breaking :翻译文件的 key 不再是中文,如果有修改过英文翻译,需要换成新 key (#1416) (#1418) 拆解 factory.tsx,添加 RootRenderer,并能 处理部分 action, 直接渲染个按钮也能弹窗,发ajax了 (#1425) Text 配置 source 样式优化 (#1429) 更换 autobind,继承时 this 不错乱 (#1433) Bugfix 修复 表单项在不配置 name 的时候,value 属性失效问题 (#1372) 修复 Excel 导出的列顺序依照配置的顺序,而不是数据源 (#1377) 修复 ChartRadios tooltip 问题. (#1378) 修复 位置选择组件在新版百度地图 api 下无法使用问题 (#1381) 修复 表单项有多个的时候,回车不提交问题 (#1387) 修复 helper 中 white-space 不正确问题 (#1390) 修复 Excel 导出不支持嵌套 name 和 tpl 问题 (#1424) 修复 收起状态导航菜单不可点击跳转问题 (#1428) 修复 Checkbox 无 disabled 样式问题 (#1414)amis前端低代码框架是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台前端开发,已有 100+ 部门使用,创建了 3w+ 页面。amis前端低代码框架特点1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有超过 1 万行 JSON 配置。
基于VueEcharts数据可视化平台是为了满足数据分析、决策制定和交互式展示等需求。这样的平台提供了一种交互式可视化界面,一个用户可以查看、解释和运用数据,快速做出决策。所以,对于企业来说,这样一种数据可视化平台开发是非常有意义的。以下是更加详细的分析: 1. 提高效率——基于VueEcharts开发数据可视化平台可以降低数据分析的复杂程度,同时提高决策的质量,因为它很好地呈现了数据,使分析变得容易。 2. 提高用户使用体验——这种平台利用了Vue的特性,提供了一个强大的前端框架,用户可以享受流畅、灵活和易于使用的界面。 3. 提供多种展示方式——利用Echarts提供的多种可视化方式,平台可以让用户按自己的需要进行选择展示,比如可以使用柱状图、饼状图、折线图、散点图等多种方式展示数据,方便用户进行数据分析。 4. 协作——通过这种平台,不同部门的员工可以轻松协作,共享同一份数据,进行各种分析和决策。 5. 扩展性——利用VueEcharts提供的丰富插件和组件,平台可以进行无限扩展,以适应不同的业务需求。 总之,基于VueEcharts开发数据可视化平台提供了一种高效、快捷、高质量的数据分析解决方案,对于企业决策制定、数据分析和沟通交流都是非常有意义和重要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值