# 数据可视化 - 大屏项目
> 项目主要参考自[实战「慕课外卖」数据大屏](http://www.youbaobao.xyz/datav-docs/)，更多内容请移步 👉 [数据可视化之入门指南](https://www.yuque.com/sherwin-sw/fe/data-visualization)。
## 1.1 技术栈
- Vue3 + TS
- AntV-G2Plot(主)
- ECharts(次) + vue-echarts
## 1.2 关键组件
### 1.2.1 大屏容器组件
[screen-container 组件](./src/components/screen-container.vue)，能够根据当前屏幕尺寸和用户期望尺寸进行比例缩放以达到适配（铺满屏幕）的目的。
### 1.2.2 数字滚动组件
基于 [vue3-count-to](https://www.npmjs.com/package/vue3-count-to) 依赖的组件，通过设定 startVal 和 endVal 实现数字滚动的动态效果。
### 1.2.3 自动轮播组件
[auto-scroll 组件](./src/components/auto-scroll.vue)，在设定表头和内容后能够自动向上滚动轮播内容（也可借助 Swiper 库来实现）。
---
如果发现本项目有错误，欢迎提交 issues 指正，也可联系邮箱 [sherwin_sw@163.com](mailto:sherwin_sw@163.com)。
数据可视化-大屏项目，主要基于 Vue3 + TS + AntV + ECharts 实现.zip （43个子文件） 
资料总结 .vscode 
extensions.json 39B tsconfig.node.json 142B src main.ts 269B App.vue 575B auto-imports.d.ts 3KB plugins echarts-plugin.ts 717B const.ts 138B compositions useClock.ts 420B useDomSize.ts 289B useData.ts 2KB styles common.less 425B modules center-header.vue 5KB top-header.vue 1KB total-device.vue 4KB total-gender.vue 2KB schedule-view.vue 2KB sale-rank.vue 3KB average-view.vue 3KB content-wrapper.vue 5KB average-age.vue 4KB sale-data.vue 7KB rider-growth.vue 2KB plan-list.vue 3KB total-user.vue 2KB sale-category.vue 2KB api request.ts 597B mocks mapData.ts 4KB map.ts 92KB index.ts 239B components sale-rank-item.vue 3KB screen-container.vue 2KB auto-scroll.vue 7KB nav-menu.vue 1KB env.d.ts 284B docs 
data-visualization-screen.png 965KB package.json 839B public favicon.ico 4KB package-lock.json 86KB vite.config.ts 689B
index.html 337B .gitignore 253B tsconfig.json 630B README.md 1KB资源评论
