# data-view-web

**Repository Path**: powerchun/data-view-web

## Basic Information

- **Project Name**: data-view-web
- **Description**: data view/report screen（数据可视化大屏，数据报表设计器）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 7
- **Created**: 2021-09-18
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# README

## 项目地址

[GITHUB](https://github.com/ggymm/data-view-web)
[GITEE](https://gitee.com/1967988842/data_view_web)

## Demo
[Demo Create](http://49.233.166.224/data-view-web/data-view-instance/create)

## 数据可视化平台

### 前端

[https://github.com/ggymm/data-view-web](https://github.com/ggymm/data-view-web)

[https://gitee.com/1967988842/data-view-web](https://gitee.com/1967988842/data-view-web)

#### 依赖项

```JSON
"@ant-design-vue/pro-layout": "^1.0.8",
"ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^5.1.2",
"echarts-wordcloud": "^2.0.0",
"hotkeys-js": "^3.8.7",
"html2canvas": "^1.0.0-rc.7",
"jsoneditor": "^9.4.1",
"lodash": "^4.17.21",
"monaco-editor": "^0.25.2",
"store": "^2.0.12",
"uuid": "^8.3.2",
"vue": "^2.6.11",
"vue-echarts": "^6.0.0-rc.6",
"vue-router": "^3.2.0",
"vue-svg-component-runtime": "^1.0.1",
"vuescroll": "^4.17.3",
"vuex": "^3.4.0"
```


#### 大屏设计器功能

1. 布局和自动缩放

2. 组件拖拽和旋转

3. 组件缩放

4. 拖拽参考线和吸附

5. 组件标尺

6. 组件组合拆分（未实现）

#### 支持图表

1. 图表组件

    1. 散点图

    2. 折线图

    3. 折线面积图

    4. 柱状图

    5. 象形柱状图

    6. 地图

    7. 饼图

    8. 雷达图

    9. 漏斗图

2. 场景

    1. 预警点滴

3. 其他

    1. 轮播列表

    2. 数字翻牌器

    3. 标题文本

    4. 计数器

    5. 进度条

#### 展示

1. 模板1

![image](https://user-images.githubusercontent.com/20694755/123239889-637a0200-d512-11eb-9b34-2c1cb6d09033.png)

2. 模板2

![image_1](https://user-images.githubusercontent.com/20694755/123239916-6aa11000-d512-11eb-94f8-3022cb351e0a.png)

3. 模板3

![image_2](https://user-images.githubusercontent.com/20694755/123239930-6f65c400-d512-11eb-87b2-6bf1c6bdc1cd.png)

4. 模板4

![image_3](https://user-images.githubusercontent.com/20694755/123239945-72f94b00-d512-11eb-8bf0-112d3664546c.png)

5. 模板5

![企业数字运维可视化监控平台-结果](https://user-images.githubusercontent.com/20694755/123599719-7d745700-d828-11eb-8dd1-150cd82f746e.png)

6. 模板6

#### 实现参考

1. 配色参考

    [jimureport](http://www.jimureport.com/)

    [easyv](https://easyv.dtstack.com/)

2. 大屏实现

    1. 大屏布局和自动缩放

        1. [visual-drag-demo](https://github.com/woai3c/visual-drag-demo)

        2. [datav-vue](https://gitee.com/pengxiaotian/datav-vue)

        3. [jimureport](http://www.jimureport.com/)

        4. [百度Sugar](https://cloud.baidu.com/product/sugar.html)

    2. 组件拖拽和旋转

        1. 布局和更新数据方式参考[visual-drag-demo](https://github.com/woai3c/visual-drag-demo)

        2. 实现参考[datav-vue](https://gitee.com/pengxiaotian/datav-vue)

    3. 组件缩放

        1. 算法参考[visual-drag-demo](https://github.com/woai3c/visual-drag-demo)

        2. 边框样式参考[datav-vue](https://gitee.com/pengxiaotian/datav-vue)

    4. 组件拖拽参考线和吸附

        1. [visual-drag-demo](https://github.com/woai3c/visual-drag-demo)

    5. 组件标尺

        1. [datav-vue](https://gitee.com/pengxiaotian/datav-vue)

    6. 组件组合，拆分

        1. [visual-drag-demo](https://github.com/woai3c/visual-drag-demo)


### 服务端

[https://github.com/ggymm/data-view](https://github.com/ggymm/data-view)

[https://gitee.com/1967988842/data-view](https://gitee.com/1967988842/data-view)

#### 数据库

数据库表说明

|数据库名称|表名|描述|
|---|---|---|
|data-view|data_source|数据源管理|
| |image|图片管理|
| |view_instance|数据可视化实例|
| |view_chart_item|可视化大屏项|
|data-view-template|*|示例图表数据|