{"id":18863683,"url":"https://github.com/it-nuanxinpro/vue3echarts","last_synced_at":"2026-07-06T19:31:13.490Z","repository":{"id":211550793,"uuid":"729407670","full_name":"IT-NuanxinPro/Vue3Echarts","owner":"IT-NuanxinPro","description":"🚀 基于 Vue 3 + ECharts 5 的现代化大屏数据可视化解决方案","archived":false,"fork":false,"pushed_at":"2025-08-04T16:11:08.000Z","size":13499,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T22:28:11.980Z","etag":null,"topics":["big-screen","charts","composition-api","dashboard","data-analytics","data-visualization","echarts","element-plus","frontend","gsap","javascript","modern-ui","pinia","responsive-design","sass","typescript","visualization-dashboard","vite","vue-router","vue3"],"latest_commit_sha":null,"homepage":"https://it-nuanxinpro.github.io/Vue3Echarts/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IT-NuanxinPro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-12-09T06:06:18.000Z","updated_at":"2025-08-04T16:14:00.000Z","dependencies_parsed_at":"2024-04-04T10:35:40.322Z","dependency_job_id":null,"html_url":"https://github.com/IT-NuanxinPro/Vue3Echarts","commit_stats":null,"previous_names":["it-nuanxinpro/vue3echarts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/IT-NuanxinPro/Vue3Echarts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2FVue3Echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2FVue3Echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2FVue3Echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2FVue3Echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IT-NuanxinPro","download_url":"https://codeload.github.com/IT-NuanxinPro/Vue3Echarts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2FVue3Echarts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35204409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["big-screen","charts","composition-api","dashboard","data-analytics","data-visualization","echarts","element-plus","frontend","gsap","javascript","modern-ui","pinia","responsive-design","sass","typescript","visualization-dashboard","vite","vue-router","vue3"],"created_at":"2024-11-08T04:38:12.416Z","updated_at":"2026-07-06T19:31:13.457Z","avatar_url":"https://github.com/IT-NuanxinPro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🚀 Vue3 ECharts 大屏数据可视化\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vue-3.3.10-4FC08D?style=for-the-badge\u0026logo=vue.js\u0026logoColor=white\" alt=\"Vue 3\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/ECharts-5.4.3-AA344D?style=for-the-badge\u0026logo=apache-echarts\u0026logoColor=white\" alt=\"ECharts\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Element_Plus-2.4.3-409EFF?style=for-the-badge\u0026logo=element\u0026logoColor=white\" alt=\"Element Plus\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-5.0.5-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white\" alt=\"Vite\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/IT-NuanxinPro/Vue3Echarts?style=flat-square\" alt=\"License\" /\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/IT-NuanxinPro/Vue3Echarts?style=flat-square\" alt=\"Stars\" /\u003e\n  \u003cimg src=\"https://img.shields.io/github/forks/IT-NuanxinPro/Vue3Echarts?style=flat-square\" alt=\"Forks\" /\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/IT-NuanxinPro/Vue3Echarts?style=flat-square\" alt=\"Issues\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  一个基于 Vue 3 + ECharts 5 的现代化大屏数据可视化解决方案\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-特性\"\u003e特性\u003c/a\u003e •\n  \u003ca href=\"#-技术栈\"\u003e技术栈\u003c/a\u003e •\n  \u003ca href=\"#-快速开始\"\u003e快速开始\u003c/a\u003e •\n  \u003ca href=\"#-项目结构\"\u003e项目结构\u003c/a\u003e •\n  \u003ca href=\"#-开发指南\"\u003e开发指南\u003c/a\u003e •\n  \u003ca href=\"#-贡献\"\u003e贡献\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/div\u003e\n\n---\n\n## ✨ 特性\n\n🎯 **现代化技术栈** - 基于 Vue 3 Composition API + Vite 构建，享受最新的开发体验\n\n📊 **丰富的图表组件** - 集成 ECharts 5，支持多种数据可视化图表类型\n\n🎨 **响应式设计** - 完美适配各种屏幕尺寸，支持大屏展示和移动端访问\n\n⚡ **高性能** - Vite 构建工具提供极速的开发和构建体验\n\n🔧 **开箱即用** - 预配置 ESLint、自动导入、组件自动注册等开发工具\n\n🎪 **动画效果** - 集成 GSAP 动画库，提供流畅的交互体验\n\n📱 **移动端适配** - 内置 px 转 vw 插件，完美适配移动端设备\n\n🛠️ **组件化开发** - 模块化的组件架构，易于维护和扩展\n\n## 🛠️ 技术栈\n\n| 技术 | 版本 | 描述 |\n|------|------|------|\n| [Vue 3](https://vuejs.org/) | 3.3.10 | 渐进式 JavaScript 框架 |\n| [ECharts](https://echarts.apache.org/) | 5.4.3 | 强大的数据可视化库 |\n| [Element Plus](https://element-plus.org/) | 2.4.3 | Vue 3 组件库 |\n| [Vite](https://vitejs.dev/) | 5.0.5 | 下一代前端构建工具 |\n| [Vue Router](https://router.vuejs.org/) | 4.2.5 | Vue.js 官方路由 |\n| [Pinia](https://pinia.vuejs.org/) | 2.1.7 | Vue 状态管理库 |\n| [Axios](https://axios-http.com/) | 1.6.2 | HTTP 客户端 |\n| [GSAP](https://greensock.com/gsap/) | 3.12.3 | 专业级动画库 |\n| [Sass](https://sass-lang.com/) | 1.62.0 | CSS 预处理器 |\n\n## 🚀 快速开始\n\n### 环境要求\n\n- Node.js \u003e= 16.0.0\n- Yarn \u003e= 1.22.0 (推荐) 或 npm \u003e= 8.0.0\n\n### 安装依赖\n\n```bash\n# 克隆项目\ngit clone https://github.com/IT-NuanxinPro/Vue3Echarts.git\n\n# 进入项目目录\ncd Vue3Echarts\n\n# 安装依赖\nyarn install\n# 或者\nnpm install\n```\n\n### 开发环境\n\n```bash\n# 启动开发服务器\nyarn dev\n# 或者\nnpm run dev\n```\n\n访问 [http://localhost:5173](http://localhost:5173) 查看项目\n\n### 生产构建\n\n```bash\n# 构建生产版本\nyarn build\n# 或者\nnpm run build\n```\n\n### 预览生产版本\n\n```bash\n# 预览构建结果\nyarn preview\n# 或者\nnpm run preview\n```\n\n### 代码检查\n\n```bash\n# 运行 ESLint 检查并自动修复\nyarn lint\n# 或者\nnpm run lint\n```\n\n## 📁 项目结构\n\n```\nVue3Echarts/\n├── public/                 # 静态资源\n│   └── favicon.ico        # 网站图标\n├── src/                   # 源代码\n│   ├── assets/           # 资源文件\n│   │   ├── img/         # 图片资源\n│   │   ├── json/        # JSON 数据\n│   │   └── style/       # 全局样式\n│   ├── components/       # 公共组件\n│   ├── plugins/         # 插件配置\n│   │   └── stylePxToVw.js # px转vw插件\n│   ├── router/          # 路由配置\n│   │   └── index.js     # 路由入口\n│   ├── stores/          # 状态管理\n│   ├── utils/           # 工具函数\n│   ├── views/           # 页面组件\n│   │   └── bigScreen/   # 大屏可视化页面\n│   │       ├── Layout.vue      # 布局组件\n│   │       └── components/     # 页面组件\n│   │           ├── navBar/     # 导航栏\n│   │           └── content/    # 内容区域\n│   │               ├── leftBox/    # 左侧图表区\n│   │               ├── centerBox/  # 中央图表区\n│   │               └── rightBox/   # 右侧图表区\n│   ├── App.vue          # 根组件\n│   └── main.js          # 应用入口\n├── index.html           # HTML 模板\n├── package.json         # 项目配置\n├── vite.config.mjs      # Vite 配置\n├── postcss.config.js    # PostCSS 配置\n└── README.md           # 项目说明\n```\n\n## 🎯 核心功能\n\n### 📊 数据可视化\n- **多样化图表** - 支持柱状图、折线图、饼图、散点图等多种 ECharts 图表\n- **实时数据** - 支持数据实时更新和动态展示\n- **交互式图表** - 丰富的图表交互功能，提升用户体验\n\n### 🎨 界面设计\n- **大屏适配** - 专为大屏显示优化的界面布局\n- **响应式布局** - 自适应不同屏幕尺寸和分辨率\n- **美观主题** - 现代化的 UI 设计和配色方案\n\n### ⚡ 性能优化\n- **组件懒加载** - 路由级别的代码分割\n- **自动导入** - Vue 组件和 API 自动导入\n- **构建优化** - Vite 提供的极速构建体验\n\n## 🔧 开发指南\n\n### 添加新图表\n\n1. 在对应的区域组件中创建新的图表组件：\n\n```javascript\n// src/views/bigScreen/components/content/leftBox/components/newChart.vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"chartRef\" class=\"chart-container\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref, onMounted } from 'vue'\nimport * as echarts from 'echarts'\n\nconst chartRef = ref(null)\n\nonMounted(() =\u003e {\n  const chart = echarts.init(chartRef.value)\n\n  const option = {\n    // ECharts 配置项\n  }\n\n  chart.setOption(option)\n})\n\u003c/script\u003e\n```\n\n2. 在父组件中引入并使用：\n\n```javascript\nimport NewChart from './components/newChart.vue'\n```\n\n### 自定义主题\n\n项目支持自定义 ECharts 主题，在 `src/assets/` 目录下添加主题文件：\n\n```javascript\n// src/assets/theme/custom.js\nexport const customTheme = {\n  color: ['#3398DB', '#FF6B6B', '#4ECDC4'],\n  backgroundColor: 'transparent',\n  // 更多主题配置...\n}\n```\n\n### 响应式适配\n\n项目内置了 px 转 vw 的插件，支持以下特性：\n\n- **自动转换** - 模板中的 px 单位自动转换为 vw\n- **精确适配** - 基于 1920px 设计稿的精确适配\n- **灵活配置** - 可在 `src/plugins/stylePxToVw.js` 中调整配置\n\n## 🌟 最佳实践\n\n### 组件开发\n- 使用 Composition API 编写组件\n- 合理使用 `ref` 和 `reactive` 管理状态\n- 组件间通信优先使用 props 和 emit\n\n### 性能优化\n- 图表组件使用 `shallowRef` 避免深度响应\n- 大数据量时考虑使用虚拟滚动\n- 合理使用 `v-memo` 优化渲染性能\n\n### 代码规范\n- 遵循 ESLint 配置的代码规范\n- 使用 TypeScript 类型注解（可选）\n- 组件和文件命名采用 PascalCase\n\n## 🤝 贡献\n\n欢迎贡献代码！请遵循以下步骤：\n\n1. Fork 本仓库\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启 Pull Request\n\n### 贡献指南\n\n- 提交前请运行 `yarn lint` 检查代码规范\n- 确保新功能有对应的文档说明\n- 重大更改请先开 Issue 讨论\n\n## 📄 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情\n\n## 🙏 致谢\n\n- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架\n- [ECharts](https://echarts.apache.org/) - 强大的数据可视化库\n- [Element Plus](https://element-plus.org/) - Vue 3 组件库\n- [Vite](https://vitejs.dev/) - 下一代前端构建工具\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**如果这个项目对你有帮助，请给它一个 ⭐️**\n\nMade with ❤️ by [IT-NuanxinPro](https://github.com/IT-NuanxinPro)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fit-nuanxinpro%2Fvue3echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fit-nuanxinpro%2Fvue3echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fit-nuanxinpro%2Fvue3echarts/lists"}