OpenDataV 是一个拖拽式、#低代码 数据 #可视化 开发平台。它允许用户通过拖拽组件到画布上,快速搭建各种炫酷的数据可视化大屏。不仅内置了丰富的组件库,还支持用户开发自己的组件并将其接入平台,从而满足多样化的业务需求。

https://mp.weixin.qq.com/s/rFFtjb96FRxD7MbjvEboWw

项目特性:

  1. 拖拽式操作

简单易用:通过拖拽组件到画布上,快速搭建数据可视化大屏。

高效开发:无需编写大量代码,通过可视化界面完成大部分操作。

  1. 可视化配置

实时预览:在编辑过程中实时预览效果,所见即所得。

灵活配置:支持组件的详细配置,包括样式、数据源等。

  1. 低代码开发

快速上手:适合新手快速上手,降低开发门槛。

高效开发:减少重复代码编写,提高开发效率。

  1. 支持自定义组件

组件开发:支持用户开发自己的组件并接入平台。

组件库丰富:内置多种常用组件,满足不同需求。

  1. 数据动态处理

数据接入:支持多种数据源,包括静态数据、HTTP 接口数据等。

动态处理:支持数据的动态处理,满足复杂的数据需求。

安装使用:


// 安装依赖
pnpm install
pnpm bootstrap
// 启动运行
pnpm dev
// 打包项目
pnpm build
功能模块:
  1. 编辑器页面

基本功能:编辑、预览、导入、导出、保存。

图层操作:支持图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴。

组件操作:支持组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐。

操作记录:支持用户操作记录的恢复、撤销功能。

  1. 接口管理

数据源管理:支持示例数据、静态数据、HTTP 接口数据的适配。

动态处理:支持数据的动态处理,满足复杂的数据需求。

  1. 组件管理

自定义组件:支持用户自定义组件。

组件配置:支持组件的用户自定义配置项。

  1. 主题切换

明暗主题:支持明暗主题切换,适应不同使用场景。

技术栈:

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。

文档更新时间: 2025-06-04 22:01   作者:admin