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

GoView是一个低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。它的技术栈为:Vue3+TypeScript4+Vite2+NaiveUI+ECharts5+Axios+Pinia2+PlopJS

在这里插入图片描述

介绍

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

在线 Demo 地址:https://www.mtruning.club

Gitee 源码地址:https://gitee.com/MTrun/go-view

在线文档地址:http://www.mtruning.club:81/

技术点:

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

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

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

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

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

部分技术栈为:

名称 版本 名称 版本
Vue 3.2.x TypeScript4 4.6.x
Vite 2.9.x NaiveUI 2.27.x
ECharts 5.3.x Pinia 2.0.x
详见 package.json 😁 🥰 🤗

开发环境:

名称 版本 名称 版本
node 16.14.x npm 8.5.x
pnpm 6.32.x windows 11

已完成图表:

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

介绍页面

项目列表区域
在这里插入图片描述
大屏编辑区域
在这里插入图片描述
这里能看到更多说明:http://www.mtruning.club:81/framework/start/pageGuide.html

特别感谢

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

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

其余

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/4936.html

(1)
上一篇 2022-12-08 17:42
下一篇 2022-12-08 17:42

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信