DataRoom开源大屏设计器：零代码构建专业级数据可视化平台

DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的开源大屏设计器，提供完整的目录管理、DashBoard设计和实时预览能力。支持MySQL、Oracle、PostgreSQL、JSON等多种数据源接入，对于复杂数据处理还可以使用Groovy脚本数据集，使用简单，完全免费，代码开源。

核心功能特色

DataRoom提供一站式大屏设计解决方案，具备以下核心功能：

• 多数据源支持：兼容MySQL、Oracle、PostgreSQL、JSON文件、HTTP接口及Groovy脚本处理复杂数据
• 拖拽式设计界面：通过直观的可视化编辑器快速配置大屏布局和组件
• 丰富图表组件库：内置折线图、柱状图、饼图、雷达图等30+可视化组件
• 实时预览部署：设计完成后可即时预览效果并导出配置，支持大屏和H5移动端适配
• 脚本数据处理：支持Groovy脚本实现复杂数据转换和计算逻辑

DataRoom可视化设计界面，支持组件拖拽和实时配置调整

环境要求与准备

基础环境配置

• JDK 8+ 运行环境
• Maven 3.x 项目构建工具
• Node.js 12.x+ 前端运行环境
• MySQL 5.7+ 数据库服务

环境验证

通过终端命令检查环境版本：

java -version  # 检查Java版本
mvn -v         # 检查Maven版本  
node -v        # 检查Node.js版本

快速安装部署指南

1. 获取项目源码

git clone https://gitcode.com/gh_mirrors/da/DataRoom

2. 数据库配置

1. 创建MySQL数据库并执行初始化脚本：

   source DataRoom/DataRoom/doc/init.sql
   

2. 修改后端数据库配置文件：

   # DataRoom/DataRoom/dataroom-server/src/main/resources/application.yml
   spring:
     datasource:
       url: jdbc:mysql://localhost:3306/dataroom?useUnicode=true
       username: 您的数据库用户名
       password: 您的数据库密码
   

3. 服务启动

# 后端服务启动
cd DataRoom/DataRoom
mvn clean package -DskipTests
java -jar dataroom-server/target/dataroom-server.jar

# 前端服务启动（新终端窗口）
cd DataRoom/data-room-ui
npm install
npm run serve

大屏设计全流程

1. 数据源配置管理

进入数据源管理页面，支持多种数据接入方式：

• 关系型数据库连接（MySQL/Oracle/PostgreSQL）
• JSON文件数据导入
• HTTP API接口对接
• Groovy脚本数据处理

DataRoom支持多类型数据源配置，满足复杂数据接入需求

2. 拖拽式大屏设计

1. 创建新的大屏项目，从左侧组件库选择需要的图表拖入画布
2. 配置组件数据绑定关系和样式属性
3. 使用内置行业模板快速生成专业大屏

3. 预览与导出功能

• 点击预览按钮查看实时设计效果
• 支持导出HTML静态文件部署
• 可导出JSON配置用于版本管理

高级功能特性

自定义组件开发

通过扩展组件库实现个性化需求，支持Vue组件无缝集成。开发者可以基于现有组件模板创建自定义可视化组件。

Groovy脚本数据处理

利用Groovy脚本实现复杂数据转换逻辑：

// 数据格式转换示例脚本
def process(data) {
  return data.stream().map(row -> {
    return [
      category: row.productCategory,
      sales: row.totalSales * conversionRate,
      trend: calculateTrend(row.historicalData)
    ]
  }).collect()
}

多端适配支持

DataRoom设计的大屏支持PC端和移动端H5适配，确保在不同设备上都能获得良好的可视化体验。

项目结构与资源

核心目录结构

• DataRoom/dataroom-server/ - 后端SpringBoot服务
• DataRoom/data-room-ui/ - 前端Vue应用
• DataRoom/doc/ - 项目文档和初始化脚本
• data-room-ui/packages/dashBoard/ - 大屏设计器核心模块
• data-room-ui/packages/components/ - 可视化组件库

学习资源

• 官方文档：DataRoom/doc/
• 组件示例：data-room-ui/example/
• 开发规范：data-room-ui/开发规范.md

使用DataRoom构建的企业级数据监控大屏示例

技术架构优势

DataRoom采用前后端分离架构，后端基于SpringBoot提供稳定的数据服务，前端基于Vue和ElementUI构建响应式设计界面。可视化组件基于G2Plot和Echarts，提供丰富的图表类型和交互功能。

项目支持Docker容器化部署，提供完整的CI/CD支持，便于企业级部署和维护。

通过DataRoom开源大屏设计器，即使是零基础的开发者也能快速构建专业级别的数据可视化大屏，大幅降低数据可视化项目的开发门槛和实施成本。