OpenDataV 是一个拖拽式、#低代码 数据 #可视化 开发平台。它允许用户通过拖拽组件到画布上,快速搭建各种炫酷的数据可视化大屏。不仅内置了丰富的组件库,还支持用户开发自己的组件并将其接入平台,从而满足多样化的业务需求。
https://mp.weixin.qq.com/s/rFFtjb96FRxD7MbjvEboWw
项目特性:
- 拖拽式操作
简单易用:通过拖拽组件到画布上,快速搭建数据可视化大屏。
高效开发:无需编写大量代码,通过可视化界面完成大部分操作。
- 可视化配置
实时预览:在编辑过程中实时预览效果,所见即所得。
灵活配置:支持组件的详细配置,包括样式、数据源等。
- 低代码开发
快速上手:适合新手快速上手,降低开发门槛。
高效开发:减少重复代码编写,提高开发效率。
- 支持自定义组件
组件开发:支持用户开发自己的组件并接入平台。
组件库丰富:内置多种常用组件,满足不同需求。
- 数据动态处理
数据接入:支持多种数据源,包括静态数据、HTTP 接口数据等。
动态处理:支持数据的动态处理,满足复杂的数据需求。
安装使用:
// 安装依赖
pnpm install
pnpm bootstrap
// 启动运行
pnpm dev
// 打包项目
pnpm build
功能模块:
- 编辑器页面
基本功能:编辑、预览、导入、导出、保存。
图层操作:支持图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴。
组件操作:支持组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐。
操作记录:支持用户操作记录的恢复、撤销功能。
- 接口管理
数据源管理:支持示例数据、静态数据、HTTP 接口数据的适配。
动态处理:支持数据的动态处理,满足复杂的数据需求。
- 组件管理
自定义组件:支持用户自定义组件。
组件配置:支持组件的用户自定义配置项。
- 主题切换
明暗主题:支持明暗主题切换,适应不同使用场景。
技术栈:
Vue 3:使用 #Vue3 构建前端界面。
Vite:使用 Vite 作为构建工具,提升开发效率。
TypeScript:使用 TypeScript 提供类型安全和更好的开发体验。
NaiveUI:使用 #NaiveUI 作为界面库,提供丰富的 UI 组件。
Node.js:后端服务基于 Node.js 开发。
Express:使用 Express 框架处理 HTTP 请求。
Monorepo:使用 Monorepo 模式进行组件和依赖管理。
开发环境搭建:
Node.js:确保已安装 Node.js 16.14.x。
pnpm:确保已安装 pnpm 7.9.3。
Vue:确保已安装 Vue 3.2.37。