/vue-data-visualization

基于Vue3.0的“数据可视化大屏”设计与编辑器

Primary LanguageTypeScriptApache License 2.0Apache-2.0

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