14 Star 74 Fork 44

MiyueSC / vue-data-visualization

Gitee — Enterprise-level DevOps R&D management platform
Join Gitee
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Vue 3 Data Visualization

项目简介

GitHub stars GitHub stars

star fork

本项目为个人项目, 主要使用 Vue 3, Echarts 5, Element Plus 进行开发. 使用原生 JavaScript 实现元素的拖拽与缩放.

该项目主要为实现通用的可视化大屏的简单配置, 对于特殊图表仍然需要二次开发.

项目预览: https://miyuesc.github.io/data-visualization/

国内同步镜像: https://miyuesc.gitee.io/data-visualization/

预览地址可能会存在版本不符的问题, 建议下载运行

主要功能

  • ECharts常用图表
  • 标题单位
  • 组件拖拽/缩放
  • 边框背景
  • 图表坐标轴配置
  • 图例设置
  • 画布整体缩放
  • 组件层级调整
  • 组件图层列表
  • 常用形状组件
  • 标题/文字组件
  • 图表的不同设置
  • 高德地图组件
  • 常用列表/轮播/数字动画等组件
  • 预览/导出json
  • 数据源配置
  • ...

使用

1. 下载或克隆该项目到本地

git clone https://github.com/miyuesc/vue-data-visualization.git -b main

2. 安装依赖

// yarn run install
npm run install

3. 运行预览

// yarn run build
npm run build

运行预览

1. 初始界面

image-20210705145317801

2. 拖拽效果

image-20210705145333404

3. 标题与单位配置

image-20210705145411569

4. 背景边框配置

image-20210705145621180

5. X轴/Y轴配置

image-20210705145838804

6. 图层管理与锁定

image-20210705145932618

友情赞助

偷偷丢个赞赏码吧~~~~

微信:如果对您有帮助,您可以请我喝杯咖啡~~

支付宝:如果对您有帮助,您可以请我喝杯咖啡~~

学习交流

如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。

订阅号名称:前端小白MiyueFE

订阅号:前端小白MiyueFE

Repository Comments ( 16 )

Sign in for post a comment

About

基于Vue3.0的“数据可视化大屏”设计与编辑器 expand collapse
TypeScript and 5 more languages
Apache-2.0
Cancel

Releases

No release

vue-data-visualization

Contributors

All

Activities

load more
can not load any more
1
https://gitee.com/MiyueSC/vue-data-visualization.git
git@gitee.com:MiyueSC/vue-data-visualization.git
MiyueSC
vue-data-visualization
vue-data-visualization
main

Search

181749 a2d7925e 1850385 181749 9f8568a7 1850385