当前位置:   article > 正文

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

dataroom

【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=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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

说明:


如果数据库服务不在本地的话需要修改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
  • 1

在这里插入图片描述

2、启动前端服务

npm run serve
  • 1

在这里插入图片描述

五、体验大屏设计器

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
    }
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在这里插入图片描述
在这里插入图片描述

4、新建大屏

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/593061
推荐阅读
相关标签
  

闽ICP备14008679号