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

2026-02-06 04:08:27作者：冯梦姬Eddie

🔥基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备目录管理、DashBoard设计、预览能力，支持MySQL、Oracle、PostgreSQL、JSON等数据集接入，对于复杂数据处理还可以使用Groovy脚本数据集，使用简单，完全免费，代码开源。

项目地址：https://gitcode.com/gh_mirrors/da/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. 数据库配置

创建MySQL数据库并执行初始化脚本：
```
source DataRoom/DataRoom/doc/init.sql
```

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

# 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. 拖拽式大屏设计

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

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()
}