{"id":17313086,"url":"https://github.com/miyuesc/vue-data-visualization","last_synced_at":"2025-07-02T03:34:08.614Z","repository":{"id":43138068,"uuid":"348633502","full_name":"miyuesc/vue-data-visualization","owner":"miyuesc","description":"基于Vue3.0的“数据可视化大屏”设计与编辑器","archived":false,"fork":false,"pushed_at":"2023-03-01T01:44:12.000Z","size":8579,"stargazers_count":206,"open_issues_count":2,"forks_count":65,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-10T05:04:28.363Z","etag":null,"topics":["typescript","visualization","vue","vue-next","vue3"],"latest_commit_sha":null,"homepage":"https://miyuesc.github.io/data-visualization/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miyuesc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-17T08:29:10.000Z","updated_at":"2025-04-02T05:42:07.000Z","dependencies_parsed_at":"2024-12-26T08:11:30.289Z","dependency_job_id":"cf84b6ba-1e6a-4e06-995b-5affe562309d","html_url":"https://github.com/miyuesc/vue-data-visualization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/miyuesc/vue-data-visualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miyuesc%2Fvue-data-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miyuesc%2Fvue-data-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miyuesc%2Fvue-data-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miyuesc%2Fvue-data-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miyuesc","download_url":"https://codeload.github.com/miyuesc/vue-data-visualization/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miyuesc%2Fvue-data-visualization/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263070311,"owners_count":23409110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["typescript","visualization","vue","vue-next","vue3"],"created_at":"2024-10-15T12:45:43.914Z","updated_at":"2025-07-02T03:34:08.590Z","avatar_url":"https://github.com/miyuesc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Data Visualization\n\n## 项目简介\n\n\u003ca href=\"https://github.com/miyuesc/vue-data-visualization\" target=\"__blank\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/miyuesc/vue-data-visualization?style=flat\u0026logo=github\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/miyuesc/vue-data-visualization\" target=\"__blank\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/forks/miyuesc/vue-data-visualization?style=flat\u0026logo=github\" /\u003e\u003c/a\u003e\n\n\u003ca href='https://gitee.com/miyuesc/vue-data-visualization'\u003e\u003cimg src='https://gitee.com/miyuesc/vue-data-visualization/badge/star.svg?theme=dark' alt='star' /\u003e\u003c/a\u003e\n\u003ca href='https://gitee.com/miyuesc/vue-data-visualization'\u003e\u003cimg src='https://gitee.com/miyuesc/vue-data-visualization/badge/fork.svg?theme=dark' alt='fork' /\u003e\u003c/a\u003e\n\n本项目为个人项目, 主要使用 `Vue 3`, `Echarts 5`, `Element Plus` 进行开发. 使用原生 `JavaScript` 实现元素的拖拽与缩放.\n\n该项目主要为实现通用的可视化大屏的简单配置, 对于特殊图表仍然需要二次开发.\n\n项目预览: [https://miyuesc.github.io/data-visualization/](https://miyuesc.github.io/data-visualization/)\n\n国内同步镜像: [https://miyuesc.gitee.io/data-visualization/](https://miyuesc.gitee.io/data-visualization/)\n\n\u003e 预览地址可能会存在版本不符的问题, 建议下载运行\n\n## 主要功能\n\n- [x] ECharts常用图表\n- [x] 标题单位\n- [x] 组件拖拽/缩放\n- [x] 边框背景\n- [x] 图表坐标轴配置\n- [x] 图例设置\n- [x] 画布整体缩放\n- [x] 组件层级调整\n- [x] 组件图层列表\n- [x] 常用形状组件\n- [ ] 标题/文字组件\n- [ ] 图表的不同设置\n- [ ] 高德地图组件\n- [ ] 常用列表/轮播/数字动画等组件\n- [ ] 预览/导出json\n- [ ] 数据源配置\n- [ ] ...\n\n## 使用\n\n### 1. 下载或克隆该项目到本地\n\n```shell\ngit clone https://github.com/miyuesc/vue-data-visualization.git -b main\n```\n\n### 2. 安装依赖\n\n```shell\n// yarn run install\nnpm run install\n```\n\n### 3. 运行预览\n\n```shell\n// yarn run build\nnpm run build\n```\n\n## 运行预览\n\n### 1. 初始界面\n\n![image-20210705145317801](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145317801.png)\n\n### 2. 拖拽效果\n\n![image-20210705145333404](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145333404.png)\n\n### 3. 标题与单位配置\n\n![image-20210705145411569](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145411569.png)\n\n### 4. 背景边框配置\n\n![image-20210705145621180](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145621180.png)\n\n### 5. X轴/Y轴配置\n\n![image-20210705145838804](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145838804.png)\n\n### 6. 图层管理与锁定\n\n![image-20210705145932618](https://gitee.com/MiyueSC/image-bed/raw/master/image-20210705145932618.png)\n\n\n\n## 友情赞助\n\n偷偷丢个赞赏码吧~~~~\n\n微信：[如果对您有帮助，您可以请我喝杯咖啡~~](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/fcf8ffa7f5a1dad34c3c9066e6b0f1d2a181c981.jpg)\n\n支付宝：[如果对您有帮助，您可以请我喝杯咖啡~~](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/8236f07c5d73175acbed49937020ed05127d0de9.jpg)\n\n## 学习交流\n\n如果您觉得这些文章对您有帮助，想和我一起学习，欢迎您关注我的微信订阅号。\n\n订阅号名称：前端小白MiyueFE\n\n订阅号：[前端小白MiyueFE](https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/article/fdef0d8f1731ed03b4123d22b7d82acacb6ca10c.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiyuesc%2Fvue-data-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiyuesc%2Fvue-data-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiyuesc%2Fvue-data-visualization/lists"}