**数据大屏

猿急送>武汉前端兼职程序员>admin>

案例列表

基本信息

案例ID：233538

技术顾问：admin - 5年经验 - 武汉硕择光电有限公司

联系沟通

微信扫码，建群沟通

项目名称：**数据大屏

所属行业：教育 - K12教育

->查看更多案例

案例介绍

技术栈
- 前端框架: Vue 3 + TypeScript + Vite
- UI 组件库: Element Plus
- 状态管理: Pinia + pinia-plugin-persistedstate
- 路由管理: Vue Router 4
- 样式方案: SCSS + UnoCSS + PostCSS
- 数据可视化: ECharts
- 动画库: GSAP
- 工具库: Axios、Day.js、Mitt
- 构建工具: Vite + ESLint + Prettier
- 开发工具: Vue DevTools、Auto Import、Components 自动导入

项目概述
1. 大屏适配：使用 `v-scale-screen` 和 `autofit.js` 实现多分辨率适配，保证不同屏幕下显示一致。
2. 数据可视化：集成 ECharts，支持地图、图表等展示，并封装通用图表组件。
3. 无缝滚动：自定义 `useSeamlessScroll`，支持多方向、悬停暂停、内容克隆，提升大屏滚动体验。
4. 模块化架构：按功能拆分（学情分布、教育均衡、教师画像、学生画像），组件化设计，便于维护与扩展。
5. 性能优化：路由懒加载、组件按需导入、图片资源优化，提升加载与运行性能。
6. 开发体验：TypeScript 类型约束、ESLint + Prettier 规范、自动导入减少样板代码。
7. 响应式设计：结合 SCSS 与 UnoCSS，适配不同设备，保证交互与视觉一致。