3.3K Star ! 超级好用开源大屏设计器!

DataRoom 是一款基于 SpringBoot + Vue 技术栈构建的开源大屏设计器,集成了 MyBatis-Plus、ElementUI、ECharts、G2Plot 等主流前端与后端生态。它不仅支持 MySQL、Oracle、PostgreSQL、SQL Server、ClickHouse 等关系型数据库,还能通过 HTTP、JSON、Groovy 脚本、JavaScript 函数甚至 ElasticSearch 接入非结构化或实时数据流。更重要的是------完全免费、代码开源、可私有化部署,为企业和开发者提供了一条低成本构建专业级数据大屏的路径。

一、为什么选择DataRoom?

DataRoom致力于解决传统数据可视化工具的高门槛问题,通过拖拽式设计和丰富的组件库,让任何人都能轻松上手。无论是企业运营监控、业务数据展示,还是项目管理看板,DataRoom都能提供完美的解决方案。

在传统 BI 工具动辄需要 SQL 编写、DAX 公式或复杂配置的背景下,DataRoom 的核心理念是:让业务人员也能成为大屏设计师。

它通过所见即所得的画布操作,将图表、文本、装饰元素像 PPT 一样自由组合;内置 80+ 可视化组件(含动态边框、3D 图标、飞线地图等),无需前端技能即可搭建具有视觉冲击力的指挥中心看板;更关键的是,它不绑定特定云厂商或 SaaS 平台,既可独立运行,也能无缝嵌入现有 Java Web 项目,真正实现"用得上、改得了、控得住"。

二、工具优势

  • 一站式大屏解决方案,从数据源接入->数据清洗处理->大屏设计->大屏预览->大屏发布上线
  • 支持多种数据集接入,如:原始数据集、自助数据集(支持多表关联)、存储过程、JSON(静态数据)、JS脚本、Groovy脚本、ElasticSearch、HTTP接口,满足大多数数据接入需求
  • 支持大屏🔥独立部署,不对原有工程产生影响,适用于老项目
  • 支持大屏🔥嵌入式集成,引入依赖包即可,与项目无缝融合,无其他系统框架依赖,减少运维成本,适用于新项目
  • 支持组件🔥在线、离线开发,在线开发业务组件、离线开发系统组件,轻松解决图表不满足需求问题
  • 支持自定义🔥接口权限、数据权限,轻松对接Shiro、Security等认证框架,保证大屏数据安全

1、智能画布操作

支持多选对齐(左/右/居中/均分)、图层管理(置顶/置底/锁定)、组合解组,大幅提升复杂布局效率;所有操作实时保存,意外关闭浏览器后可恢复设计进度。

2、资源库驱动设计

内置上百种国产化风格素材:科技感边框、渐变背景、动态粒子、3D 地球等;支持上传企业 VI 元素(如 LOGO、品牌色卡),确保大屏符合统一视觉规范。

3、数据集引擎强大

自助数据集支持可视化多表 JOIN,无需手写 SQL;HTTP 数据集可对接 RESTful API,轻松接入 IoT 设备或第三方平台(如钉钉、企业微信);定时刷新机制保障数据实时性,最低支持 5 秒级更新。

4、组件复用与二次开发

设计好的"疫情热力图模块"可保存为业务组件,在其他大屏中一键复用;开发者可通过离线模式扩展系统组件,例如集成 AntV L7 实现地理空间分析。

三、功能介绍

1、大屏管理

支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】操作

2、大屏设计器

采用拖拉拽可视化设计,支持30+基础组件、40+种图表组件、15种边框组件、10多种修饰组件

3、资源库

支持资源自定义上传、在大屏设计器中直接引用资源,如:3D图片、边框图片、装饰条、背景图

4、数据源

支持MySQL、PostgreSQL、Oracle 、ClickHouse、SqlServer等主流数据库接入

5、数据集

支持原始数据集、自助数据集、存储过程数据集、JSON数据集、脚本数据集、JS脚本数据集、HTTP数据集多种方式接入数据

四、快速部署

部署教程请前往原文查看!
部署教程

相关推荐
小林ixn4 分钟前
前端卡顿终结者:用 useRef 把 Web Worker 请进 React 项目
前端·react.js·前端框架
sunly_5 分钟前
React 三个重要概念:Ref、Props、State 详解
前端·javascript·react.js
weixin_431600446 分钟前
前端对接 SSE 的两种常见方式
前端·后端·学习·ai·sse·nest.js
Mh12 分钟前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
用户938515635079 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep9 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端10 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望10 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
90后的晨仔10 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔10 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端