【DataRoom】- 基于VUE的开源的大屏可视化设计器

【DataRoom】- 基于VUE的开源的大屏可视化设计器

DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏设计、预览能力，支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy等数据集接入，使用简单，完全免费，代码开源。

详细文档参见
1、【 GCPAAS大屏设计器 - 官方文档】
2、【 GCPAAS大屏设计器 - Gitee源码地址】

目录

一、环境准备

序号软件版本备注1Node14.xx必要2Npm6.xx必要3Mysql8.0必要4JDK1.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=trueusername: 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目录安装依赖

npminstall--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开源产品的体验。