Skip to content

ggymm/data-view-web

Repository files navigation

README

项目地址

GITHUB GITEE

Demo

Demo Create

下阶段目标

  1. 更新版本为 vue3.0
  2. 重构数据源逻辑
  3. 添加报表管理器

数据可视化平台

前端

https://github.com/ggymm/data-view-web

https://gitee.com/1967988842/data-view-web

依赖项

"@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. 漏斗图

  1. 场景

    1. 预警点滴

  1. 其他

    1. 轮播列表

    2. 数字翻牌器

    3. 标题文本

    4. 计数器

    5. 进度条

展示

  1. 模板1

image

  1. 模板2

image_1

  1. 模板3

image_2

  1. 模板4

image_3

  1. 模板5

企业数字运维可视化监控平台-结果

  1. 模板6

实现参考

  1. 配色参考

    jimureport

    easyv

  1. 大屏实现

    1. 大屏布局和自动缩放

        1. visual-drag-demo

        2. datav-vue

        3. jimureport

        4. 百度Sugar

    2. 组件拖拽和旋转

        1. 布局和更新数据方式参考visual-drag-demo

        2. 实现参考datav-vue

    3. 组件缩放

        1. 算法参考visual-drag-demo

        2. 边框样式参考datav-vue

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

        1. visual-drag-demo

    5. 组件标尺

        1. datav-vue

    6. 组件组合,拆分

        1. visual-drag-demo

服务端

https://github.com/ggymm/data-view

https://gitee.com/1967988842/data-view

数据库

数据库表说明

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