Vue 3.2与Echarts 5强强联手，打造高效数据大屏展示利器

概述 ????

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：

• 监听浏览器的窗口大小变化, 将新的比例赋给scale变量：

四、文件资源目录 ????

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/