data view/report screen(数据可视化大屏,数据报表设计器)

Related tags

vue dataview echarts datav
Overview

README

数据可视化平台

前端

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 * 示例图表数据
Issues
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Remco Plasmeijer 190 Jul 23, 2021
Easily bind a chart to the data stored in your Vue.js components.

A plugin for adding charts to Vue Table of Contents Purpose Usage Performance Consideration Build Setup Purpose This plugin is designed to allow Vue.j

Brian Greig 193 Jun 25, 2021
A D3 Plugin for VueJS

If you are currently using d3vue we are halting updates on this project. We have created a new plugin that more deeply integrates with Vue using a sta

Brian Greig 86 Jun 8, 2021
My GitHub story in 3D. View a 3D model of your GitHub contribution graph.

My GitHub story in 3D. View a 3D model of your GitHub contribution graph.

Yunwei Xiao 9 May 17, 2021
TradingVue.js is a hackable charting lib for traders

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

TVJS 1.2k Jul 23, 2021
Create beautiful JavaScript charts with one line of Vue

Vue Chartkick Create beautiful JavaScript charts with one line of Vue See it in action Supports Chart.js, Google Charts, and Highcharts Quick Start Ru

Andrew Kane 691 Jul 24, 2021
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)

vue-echarts-v3 Vue.js v2.x+ component wrap for Apache ECharts (incubating) v3.x+ Feature Lightweight, efficient, on-demand binding events; Support for

xLsDg 888 Jul 6, 2021
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 4.4k Jul 23, 2021
A Vue component to create charts with ZingChart

Quickstart guide Quickly add charts to your Vue application with our ZingChart component This guide assumes some basic working knowledge of Vue. 1. In

ZingChart 21 Jun 25, 2021
Vue component to graph networks using d3-force

vue-d3-network Vue component to graph networks using d3-force Demo Demo Features SVG render Canvas render Links and nodes selection svg <-> canvas sha

emi 440 Jul 21, 2021
Official JSCharting Vue.js Plugin & Examples

JavaScript data visualization for Vue.js JSCharting is a JavaScript data visualization library offering seamless usage with Vue across all devices and

JSCharting 24 Jul 27, 2021
Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

Alexandru Ghiura 24 Jul 13, 2021
Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

Visualization helps end-users understand data. Vue Charts.CSS helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

VueChartsCSS 9 May 7, 2021
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 52 Jul 6, 2021