【DataRoom】- 基于VUE的开源的大屏可视化设计器
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏设计、预览能力,支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy等数据集接入,使用简单,完全免费,代码开源。
详细文档参见
1、【 GCPAAS大屏设计器 - 官方文档】
2、【 GCPAAS大屏设计器 - Gitee源码地址】
目录
- 【DataRoom】- 基于VUE的开源的大屏可视化设计器
- 一、环境准备
- 二、下载源码
- 1、用IDEA下载源码
- 2、用IDEA打开后端代码
- 三、后端服务
- 1、新建数据库配置文件
- 2、新建数据库
- 3、初始化数据库数据
- 4、启动后端服务
- 四、前端启动
- 1、进入data-room-ui目录安装依赖
- 2、启动前端服务
- 五、体验大屏设计器
- 1、访问http://localhost:7521
- 2、导入地图数据
- 3、添加数据集
- 4、新建大屏
一、环境准备
序号 | 软件 | 版本 | 备注 |
---|---|---|---|
1 | Node | 14.xx | 必要 |
2 | Npm | 6.xx | 必要 |
3 | Mysql | 8.0 | 必要 |
4 | JDK | 1.8 | 必要 |
二、下载源码
git clone https://gitee.com/gcpaas/DataRoom.git
1、用IDEA下载源码
2、用IDEA打开后端代码
打开DataRoom/DataRoom项目
三、后端服务
1、新建数据库配置文件
在 DataRoom/dataroom-server/src/main/resources 下添加配置文件 application-dev.yml ,并修改其中的数据库连接信息和文件存储信息
spring:
servlet:
multipart:
# 配置上传下载文件的最大值
max-file-size: 500MB
max-request-size: 500MB
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.p6spy.engine.spy.P6SpyDriver
url: jdbc:p6spy:mysql://127.0.0.1:3306/dataroom?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true&nullCatalogMeansCurrent=true
username: root
password: pwd
gc:
starter:
file:
# 一个存储文件的绝对路径,需要有写入权限
basePath: /root/data
# 文件资源访问前缀,一般修改ip即可
urlPrefix: http://127.0.0.1:${server.port}${server.servlet.context-path}/static
说明:
如果数据库服务不在本地的话需要修改application-dev.yml 配置文件中的spring.datasource.url中的ip和端口等数据库连接信息
2、新建数据库
3、初始化数据库数据
执行DataRoom/doc/init.sql 文件进行数据库初始化
4、启动后端服务
执行DataRoom/dataroom-server/src/main/java/com/gccloud/DataRoomApplication 启动类
四、前端启动
1、进入data-room-ui目录安装依赖
npm install --registry=http://registry.npmmirror.com
2、启动前端服务
npm run serve
五、体验大屏设计器
1、访问http://localhost:7521
2、导入地图数据
从官方文档下载地图数据
3、添加数据集
[
{
"type": "家具家电",
"sales": 19
},
{
"type": "粮油副食",
"sales": 29
},
{
"type": "生鲜水果",
"sales": 50
},
{
"type": "美容洗护",
"sales": 30
},
{
"type": "母婴用品",
"sales": 60
},
{
"type": "进口食品",
"sales": 28
},
{
"type": "食品饮料",
"sales": 70
},
{
"type": "家庭清洁",
"sales": 60
}
]
4、新建大屏
以上就是对DataRoom开源产品的体验。