Code Monkey home page Code Monkey logo

data-view-web's Introduction

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 * 示例图表数据

data-view-web's People

Contributors

ggymm avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

resultlee bebetter lihdong aixmonster cloudtips liulu19920421 wwwk forexblog suyana laopeng2021 zrryan mankaihuang wuchunfu hoho1 hc0 prnda bjccz matthrews yx362643064 zblongfei chinanala drogjh panboren tengfeilong redfeng hwedwin wefiy xubaocheng collinsyu dragonxu agenting felixhpp springlee-p lhc0101 lzj111 snowman828 loveeazy yu18264881581 beginnerdone gaojunhello fullmooth huadis sunxiaotianmg data-digger 463024907 msdnweixiao hualiang9602 gaoxuan-haxibiao 364988343 lijiao92 jmxugit mailyupeng human2312 caomengling xiongshufeng coldlocust miwi-lin 154984589 jncz xiyanglove bryanchou maxwelltesla kuailexiaozi ozhishu 739923259 rebider czd326 qindan2008 wangshuaicto wuhantop3 hansxing skyxiaokun wivw0306 hejun5448 jopocen hoangitk chirnou zxw12138 zzllbj wupeng889900 786744873 wxl279414347 shinyun jianchenc timemagic flybird119 km3036 liqian0828 caixiong110 zwzhlj100000 fgh-code0 handyliu xijinhua johnieh renxiaoming oulika luxinming dragocytus yclinks yinchinan010

data-view-web's Issues

工具栏拖拽用起来不方便

工具栏拖拽用起来不方便，每拖动一个组件都会自动隐藏，操作起来太繁琐，期待作者升级一下......

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.