人在公司写Vue3，自适应可视化数据大屏被玩坏了

前言

在当今数字化时代，数据可视化大屏已成为了展示数据、监控系统状态、传达信息的重要手段之一。 Vue3 和 Vite 作为现代化的前端技术框架，以及强大的数据可视化库 ECharts，为我们构建自适应的数据大屏提供了便利。本文将介绍如何结合 Vue3 、Vite 、JavaScript 以及 ECharts 实现一个自适应的可视化数据大屏。

搭建项目框架

使用 Vite 构建 Vue3 项目

首先，我们使用 Vite 构建一个 Vue3 项目框架。Vite 是一个基于ESM的构建工具，可以实现快速的开发与热更新。

npm init @vitejs/app my-vue3-project --template vue
cd my-vue3-project
npm install
npm run dev

屏幕适配方案选择

针对大屏的自适应，我们选择缩放（scale）的方式来适配不同分辨率的屏幕。这种方式简单易行，能够保持页面布局的整体性。

缩放（scale）的方式是一种简单直接的大屏适配方案，其主要思路是通过改变整个页面的缩放比例来适应不同分辨率的屏幕。这种方案的核心在于将页面整体进行缩放，以保持页面布局的完整性和一致性。

缩放（Scale）适配方案思路：

获取屏幕尺寸： 首先，通过JavaScript获取当前设备屏幕的宽度（或高度）。
计算缩放比例： 然后，将获取到的屏幕尺寸与设计稿的基准尺寸进行比较，计算出缩放比例。
应用缩放： 最后，将计算出的缩放比例应用到整个页面上，从而实现页面的缩放适配。

缩放（Scale）与其他适配方案的比较：

与rem适配方案的比较：

优势： 缩放方案相对简单，无需修改样式单位，适用于已有项目的快速适配。
劣势： 缩放会导致元素的尺寸和间距等等比例缩放，可能影响页面布局的精准度。
与vw适配方案的比较：

优势： vw方案相对精确，能够根据视口宽度设置元素的尺寸，适用于需要更精确适配的场景。
劣势： 需要手动计算和设置每个元素的宽度和间距，工作量较大，且不易维护。
与flex适配方案的比较：

优势： flex布局能够根据容器的尺寸自动调整内部元素的排列和尺寸，适用于动态布局的情况。
劣势： 在大屏适配时，可能需要通过媒体查询等手段来调整flex容器的布局，工作量较大。
综上所述，缩放（Scale）适配方案适用于快速适配已有项目的场景，但可能影响页面布局的精准度。而rem、vw、flex等适配方案更适用于需要更精确适配或动态布局的情况。

项目结构设计

在项目结构设计上，我们可以采用如下的目录结构：

my-vue3-app/
├── public/                  # 静态资源文件夹
│   └── index.html           # 入口文件
├── src/                     # 源代码文件夹
│   ├── components/          # 组件文件夹
│   │   └── DataPanel.vue    # 数据面板组件
│   ├── App.vue               # 根组件
│   ├── main.js               # 入口文件
│   └── utils.js              # 工具方法
├── vite.config.js          # Vite配置文件
├── package.json             # 项目依赖文件
└── ...                      # 其他文件

屏幕适配 Hook 的封装与使用

封装自适应 Hook

// useAdaptive.js
import {
   
    ref, onMounted, onUnmounted } from 'vue';


export default function useAdaptive() {
   
   
  const scale = ref(1);

  const setScale = () =>