概述 📖
1、该数据可视化大屏是基于 Vue3.2、Echarts、TypeScript 开发。采用
scale
动态屏幕适配方案，完美解决浏览器放大、缩小而导致的数据大屏变形问题。
2、项目按照
1920*1080
比例设计（F11全屏显示），支持任何尺寸的同比例缩放。
3、Echarts 数据大屏部分采用按需引入方式，大大减小整个项目打包体积。
一、在线预览 👀
Link： admin.spicyboy.cn/#/dataScree… ✨
二、Git仓库 (欢迎 Star⭐⭐⭐)
Gitee： gitee.com/HalseySpicy… ✨
GitHub： github.com/HalseySpicy… ✨
三、屏幕适配原理 ❓❔
利用 CSS的
transform：scale
属性对页面布局进行自适应缩放，CSS 元素设置完全按照设计稿大小设置 px，不需要转换长度单位。我的项目设计稿给的尺寸是
1920*1080
。具体方法如下：
dataScreenRef
为整个大盒子 DOM：
四、文件资源目录 📚
dataScreen
├─ assets
│ ├─ alarmList.Json
│ ├─ china.json
│ └─ ranking-icon.ts
├─ components
│ ├─ AgeRatioChart.vue
│ ├─ AnnualUseChart.vue
│ ├─ chinaMapChart.vue
│ ├─ HotPlateChart.vue
│ ├─ MaleFemaleRatioChart.vue
│ ├─ OverNext30Chart.vue
│ ├─ PlatformSourceChart.vue
│ └─ RealTimeAccessChart.vue
├─ images
├─ index.scss
└─ index.vue
五、Echarts 资源 🔫
目前整个数据大屏的 Echarts 图表资源都是在社区中寻找的资源。推荐几个 Echarts 社区地址：
MCChart：echarts.zhangmuchen.top/#/index
PPChart：www.ppchart.com/#/
isqqw：www.isqqw.com/
HalseySpicy
前端开发工程师
144.6k