🎉 GoView 开源!一个好用的 Vue3 低代码开发数据大屏系统

3,425 阅读2分钟

介绍

logo-poster.png

GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可制作数据大屏,减少心智负担。当然低代码也不是 “银弹”,希望所有技术人员都能理智看待此技术。

在线文档地址:www.mtruning.club

在线 Demo 地址:demo.mtruning.club/#/login

Gitee 源码地址:gitee.com/MTrun/go-vi…

技术点:

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

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

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

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

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

部分技术栈为:

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

开发环境:

名称版本名称版本
node16.14.xnpm8.5.x
pnpm6.32.xwindows11

已完成图表:

分类名称名称名称
图表柱状图横向柱状图折线图
*单/多 折线面积图饼图水球图
信息文字图片😶
列表滚动排名列表🤠🤓
小组件边框-01~13装饰-01~05数字翻牌

介绍页面

项目列表区域 pageGuide2.4e6f9cee.png

大屏编辑区域

pageGuide1.ea346dce.png

这里能看到更多说明:www.mtruning.club:81/framework/s…

特别感谢

感谢开源社区的小伙伴们提供了很多的工具,除此之外还要感谢掘金社区里的文章作者们,此项目也是看了 谭光志 :juejin.cn/user/143341…大佬写的文章才开始规划的,文章提供了很多的思路,期间也看了很多其它的文章与开源项目。

虽然自己早已有可视化相关的开源项目,但是低代码领域从未涉及过,于是开始着手设计与开发,靠爱发电。也很愿意把这个项目开源出来,希望能帮助其它小伙伴!

其余

这个项目是个人的作品,难免会有问题和 BUG,如果有问题请进行评论,我也会尽力去更新,自己也在前端学习的路上,欢迎交流,非常感谢!

logo-t-x.png