OpenDataV 是一个拖拽式、#低代码 数据 #可视化 开发平台。它允许用户通过拖拽组件到画布上,快速搭建各种炫酷的数据可视化大屏。不仅内置了丰富的组件库,还支持用户开发自己的组件并将其接入平台,从而满足多样化的业务需求。
GitHub:https://github.com/AnsGoo/openDataV
官方文档:https://ansgoo.github.io/docs/
在这里插入图片描述

项目特性:

  1. 拖拽式操作
    简单易用:通过拖拽组件到画布上,快速搭建数据可视化大屏。
    高效开发:无需编写大量代码,通过可视化界面完成大部分操作。
  2. 可视化配置
    实时预览:在编辑过程中实时预览效果,所见即所得。
    灵活配置:支持组件的详细配置,包括样式、数据源等。
  3. 低代码开发
    快速上手:适合新手快速上手,降低开发门槛。
    高效开发:减少重复代码编写,提高开发效率。
  4. 支持自定义组件
    组件开发:支持用户开发自己的组件并接入平台。
    组件库丰富:内置多种常用组件,满足不同需求。
  5. 数据动态处理
    数据接入:支持多种数据源,包括静态数据、HTTP 接口数据等。
    动态处理:支持数据的动态处理,满足复杂的数据需求。
    功能模块:
  6. 编辑器页面
    基本功能:编辑、预览、导入、导出、保存。
    图层操作:支持图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴。
    组件操作:支持组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐。
    操作记录:支持用户操作记录的恢复、撤销功能。
  7. 接口管理
    数据源管理:支持示例数据、静态数据、HTTP 接口数据的适配。
    动态处理:支持数据的动态处理,满足复杂的数据需求。
  8. 组件管理
    自定义组件:支持用户自定义组件。
    组件配置:支持组件的用户自定义配置项。
  9. 主题切换
    明暗主题:支持明暗主题切换,适应不同使用场景。

技术栈:

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。

安装使用:

git clone https://github.com/AnsGoo/openDataV.git
// 安装依赖
pnpm install
pnpm bootstrap
// 启动运行
pnpm dev
// 打包项目
pnpm build
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐