# Vue 3 Data Visualization
## 项目简介
<a href="https://github.com/miyuesc/vue-data-visualization" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/miyuesc/vue-data-visualization?style=flat&logo=github" /></a>
<a href="https://github.com/miyuesc/vue-data-visualization" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/forks/miyuesc/vue-data-visualization?style=flat&logo=github" /></a>
<a href='https://gitee.com/miyuesc/vue-data-visualization'><img src='https://gitee.com/miyuesc/vue-data-visualization/badge/star.svg?theme=dark' alt='star' /></a>
<a href='https://gitee.com/miyuesc/vue-data-visualization'><img src='https://gitee.com/miyuesc/vue-data-visualization/badge/fork.svg?theme=dark' alt='fork' /></a>
本项目为个人项目, 主要使用 `Vue 3`, `Echarts 5`, `Element Plus` 进行开发. 使用原生 `JavaScript` 实现元素的拖拽与缩放.
该项目主要为实现通用的可视化大屏的简单配置, 对于特殊图表仍然需要二次开发.
项目预览: [https://miyuesc.github.io/data-visualization/](https://miyuesc.github.io/data-visualization/)
国内同步镜像: [https://miyuesc.gitee.io/data-visualization/](https://miyuesc.gitee.io/data-visualization/)
> 预览地址可能会存在版本不符的问题, 建议下载运行
## 主要功能
- [x] ECharts常用图表
- [x] 标题单位
- [x] 组件拖拽/缩放
- [x] 边框背景
- [x] 图表坐标轴配置
- [x] 图例设置
- [x] 画布整体缩放
- [x] 组件层级调整
- [x] 组件图层列表
- [x] 常用形状组件
- [ ] 标题/文字组件
- [ ] 图表的不同设置
- [ ] 高德地图组件
- [ ] 常用列表/轮播/数字动画等组件
- [ ] 预览/导出json
- [ ] 数据源配置
- [ ] ...
## 使用
### 1. 下载或克隆该项目到本地
```shell
git clone https://github.com/miyuesc/vue-data-visualization.git -b main
```
### 2. 安装依赖
```shell
// yarn run install
npm run install
```
### 3. 运行预览
```shell
// yarn run build
npm run build
```
## 运行预览
### 1. 初始界面
### 2. 拖拽效果
### 3. 标题与单位配置
### 4. 背景边框配置
### 5. X轴/Y轴配置
### 6. 图层管理与锁定
## 友情赞助
偷偷丢个赞赏码吧~~~~
微信：[如果对您有帮助，您可以请我喝杯咖啡~~](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/fcf8ffa7f5a1dad34c3c9066e6b0f1d2a181c981.jpg)
支付宝：[如果对您有帮助，您可以请我喝杯咖啡~~](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/8236f07c5d73175acbed49937020ed05127d0de9.jpg)
## 学习交流
如果您觉得这些文章对您有帮助，想和我一起学习，欢迎您关注我的微信订阅号。
订阅号名称：前端小白MiyueFE
订阅号：[前端小白MiyueFE](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/fdef0d8f1731ed03b4123d22b7d82acacb6ca10c.jpg)
基于Vue3.0的“数据可视化大屏”设计与编辑器.zip
67 浏览量
2024-02-15
15:47:44
上传
评论
收藏 4.72MB ZIP 举报
基于Vue3.0的“数据可视化大屏”设计与编辑器.zip （92个子文件） 
资料总结 
.editorconfig 160B .browserslistrc 30B babel.config.js 66B .eslintrc.js 1KB .gitattributes 66B src main.ts 637B App.vue 367B store index.ts 6KB assets styles element-override.scss 36KB editor-styles.scss 3KB chart-component.scss 582B components presetComponents.ts 6KB componentImages.ts 2KB defaultConfig.ts 3KB images 
no-image.png 6KB background 
a6.jpg 295KB earth.jpg 237KB world.jpg 240KB a15.png 1.24MB a3.png 175KB a10.png 120KB a5.png 379KB a14.png 214KB a2.png 379KB a11.png 255KB a9.png 429KB a7.jpg 101KB a12.jpg 83KB a4.png 30KB a8.png 434KB utils commonUtils.ts 3KB cookie.js 427B components text-area Headline.vue 222B NormalTitle.vue 223B Subhead.vue 221B Content.vue 659B editor-canvas indicators ResizePointers.vue 4KB ComponentTransform.vue 2KB MoveGuideLines.vue 3KB HanldersCanvas.vue 539B ScenesCanvas.vue 274B ComponentsCanvas.vue 2KB map MarkerCluster.vue 3KB LineLayer.vue 2KB editor-palette PaletteBar.vue 6KB editor-content-pad configuration MLineConfig.vue 335B MFont.vue 3KB MLegend.vue 4KB MYAxis.vue 8KB MBaseConfig.vue 2KB MBackground.vue 5KB MXAxis.vue 8KB MTitleConfig.vue 5KB ConfigFormItem.vue 1KB ContentPad.vue 2KB shapes Rectangle.vue 673B Triangle.vue 2KB Circle.vue 667B charts LineChart.vue 3KB KChart.vue 2KB FunnelChart.vue 3KB RadarChart.vue 3KB supplement computedBackgroundStyle.ts 1KB ChartTitle.vue 2KB PieChart.vue 3KB BarChart.vue 3KB GaugeChart.vue 2KB TreeChart.vue 4KB GraphChart.vue 4KB editor-overview-pad OverviewPad.vue 2KB editor-tool-bar ToolBar.vue 4KB types store.ts 862B canvas.ts 191B component.ts 544B router index.ts 790B shims-vue.d.ts 171B hooks dropEventHook.ts 2KB resizeEventHook.ts 6KB dragEventHook.ts 3KB mock-data markers.ts 455KB views editor Editor.vue 2KB Home.vue 226B LICENSE 11KB package.json 1KB public iconfont.js 52KB
index.html 1KB logo.ico 4KB package-lock.json 1.22MB vue.config.js 972B .gitignore 231B tsconfig.json 750B README.md 3KB资源评论
