【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 ，并修改此中的数据库连接信息和文件存储信息

1. spring:
2.   servlet:
3.     multipart:
4.       # 配置上传下载文件的最大值
5.       max-file-size: 500MB
6.       max-request-size: 500MB
7.   datasource:
8.     type: com.alibaba.druid.pool.DruidDataSource
9.     driverClassName: com.p6spy.engine.spy.P6SpyDriver
10.     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
11.     username: root
12.     password: pwd
13. gc:
14.   starter:
15.     file:
16.       # 一个存储文件的绝对路径，需要有写入权限
17.       basePath: /root/data
18.       # 文件资源访问前缀，一般修改ip即可
19.       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目次安装依靠

1. npm install --registry=http://registry.npmmirror.com

复制代码

2、启动前端服务

1. npm run serve

复制代码

五、体验大屏设计器

1、访问http://localhost:7521

2、导入舆图数据

   从官方文档下载舆图数据

  3、添加数据集

1. [
2.     {
3.         "type": "家具家电",
4.         "sales": 19
5.     },
6.     {
7.         "type": "粮油副食",
8.         "sales": 29
9.     },
10.     {
11.         "type": "生鲜水果",
12.         "sales": 50
13.     },
14.     {
15.         "type": "美容洗护",
16.         "sales": 30
17.     },
18.     {
19.         "type": "母婴用品",
20.         "sales": 60
21.     },
22.     {
23.         "type": "进口食品",
24.         "sales": 28
25.     },
26.     {
27.         "type": "食品饮料",
28.         "sales": 70
29.     },
30.     {
31.         "type": "家庭清洁",
32.         "sales": 60
33.     }
34. ]

复制代码

4、新建大屏

以上就是对DataRoom开源产品的体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。