Vue--》视觉盛宴：提升可视化大屏分辨率适配的技巧

在当今数据驱动的世界中，大屏幕可视化已经成为展示复杂信息的关键工具，然而如何在各种分辨率下保持视觉效果的一致性和清晰度，在这篇文章中，我们将深入探讨如何通过有效的设计和技术策略，确保你的大屏视觉效果在任何分辨率下都能保持最佳状态，准备好迎接视觉上的突破吧！

目录

原生代码实现

DataV库实现

autofit库实现

v-scale-screen插件实现

原生代码实现

这里我们先用原生的代码封装一个大屏可视化容器，封装的代码很容易，只要做一个响应式布局，适用于全屏背景图片和中心内容的展示即可，其实现思路如下：

html：组件使用黑色背景的四个固定定位的边框（lefts, rights, tops, bottoms）来占据页面的边缘区域，fit-layout用于显示组件的内容和可选的背景图，背景图通过 props.bg 传递，且设置了模糊效果，使用插槽 (<slot>) 来插入动态内容：

<template>
    <div class="center-wrap">
        <div class="layout">
            <div class="lefts" :style="{ width: widths + 'px', height: '100%', top: 0, left: 0 }"></div>
            <div class="rights" :style="{ width: widths + 'px', height: '100%', top: 0, right: 0 }"></div>
            <div class="tops" :style="{ width: '100%', height: heights + 'px', top: 0, left: 0 }"></div>
            <div class="bottoms" :style="{ width: '100%', height: heights + 'px', bottom: 0, left: 0 }"></div>
            <div class="fit-layout" :style="getStyle">
                <div :class="{ cover: props.bg }" :style="{ backgroundImage: props.bg ? `url(${props.bg})` : '' }"></div>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

js：使用widths和heights用于存储页面边缘区域的宽度和高度，x和y用于存储缩放比例，然后根据屏幕的宽高比例和组件的宽高设置边框的尺寸，之后动态计算fit-layout的样式，包括宽度、高度和缩放比例，如下所示：

<script setup lang='ts'>
import { ref, onMounted, computed } from 'vue'
const widths = ref(0); 
const heights = ref(0);
const x = ref(1); // 横向比例
const y = ref(1); // 纵向比例

// 传递的属性
const props = defineProps({
    width: { type: Number, default: 0 }, // 宽度
    height: { type: Number, default: 0 }, // 高度
    bothWidth: { type: Number, default: 0 }, // 两侧留空的宽度
    bg: { type: String, default: "" }, // 背景图片
})

// 设置样式
const setStyle = () => {
    let bodyRadio = document.body.offsetWidth / document.body.offsetHeight; // 设置body宽高比例
    let screenRadio // 设置屏幕宽高比例
    if (props.width && props.height) {
        screenRadio = props.width / props.height; // 设置屏幕宽高比例
        if (bodyRadio > screenRadio) { //如果屏幕宽高比例大于需要固定高度
            y.value = document.body.offsetHeight / props.height; // 横向比例
            x.value = y.value; // 纵向比例
            heights.value = 0; // 高度为0
            widths.value = (document.body.offsetWidth - props.width * x.value) / 2; // 宽度
        } else {
            x.value = document.body.offsetWidth / props.width; // 纵向比例
            y.value = x.value; // 横向比例
            widths.value = props.bothWidth; // 宽度
            heights.value = (document.body.offsetHeight - props.height * x.value) / 2; // 高度
        }
    }
}

// 计算样式
const getStyle = computed(() => {
    return {
        width: props.width - props.bothWidth * 4 + "px",
        height: props.height + "px",
        transform: `scale(${x.value})`,
    }
})

onMounted(() => {
    setStyle();  // 初始化样式
    window.addEventListener("resize", setStyle); // 监听窗口变化改变动态样式
})
</script>

css：使用Flexbox布局居中layout组件，并确保其全屏显示，包含四个固定定位的边框区域和中心内容区域居中显示内容，支持缩放和背景图模糊效果，如下：

<style lang="scss" scoped>
.center-wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .layout {
        .lefts, .rights, .tops, .bottoms {
            position: fixed;
            background: black;
        }
        .fit-layout {
            position: relative;
            z-index: 1;
            transform-origin: center center;
            flex-shrink: 0;
            box-sizing: border-box;
            .cover {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                z-index: -1; // 背景图片在内容下层
                background-size: 100% 100%;
                pointer-events: none; // 防止穿透  
                filter: blur(8px);// 模糊背景
            }
        }
    }
}
</style>

接下来我们调用我们封装的组件，然后传入对应的内容进行展示，这里我们可以定义宽高比例，然后设置左右间距宽度以及传入对应的背景图片，代码如下所示：

<template>
  <fitLayout 
    :width="3840"
    :height="1080"
    :bothWidth="30"
    :bg="bg"
  >
    <div style="height: 100%; display: flex; align-items: center; justify-content: center; font-size: 100px; color: red;">内容</div>
  </fitLayout>
</template>

<script lang="ts" setup>
import fitLayout from './components/fit-layout.vue';
import bg from "./assets/images/bg.jpg"
</script>

最终呈现的效果如下所示：

DataV库实现

DataV是一个的可视化数据分析库，其主要作用是帮助用户通过图形化方式展示和分析数据，里面也是提供了一些比较不错的插件，官方网址：地址 ，如下所示：

不过上面的版本可能会有点老，仅仅支持vue2版本，使用vue3可能会出现报错的情况，这里我们就可以使用支持vue3版本的datav，其官网网址：地址 ，如下所示：

这里我们可以使用其中的一个容器组件来实现我们此次的大屏适配的效果，看看成效怎么样，如下我们先安装这个插件：

npm install @jiaminghi/data-view

安装完成之后，我们直接测试一下，给出如下代码进行查看：

<template>
  <dv-full-screen-container>
    <div class="test"></div>
  </dv-full-screen-container>
</template>

<script lang="ts" setup>

</script>

<style>
* {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
}
.test {
  width: 500px;
  height: 500px;
  background-color: red;
}
</style>

可以看到，随着我们浏览器宽度的变化，容器里面的内容也是随着进行缩放变化了：

autofit库实现

上面的Datav毕竟还是一个功能较多，内存相对比较大的库，如果仅仅只想实现一个大屏适配的效果可以采用autofit库进行实现，该库是特别针对大屏自适应方案的，算是比较不错的方式，其官方网址：地址 具体如下：

然后我们终端执行如下命令进行安装：

npm i autofit.js

autofit.js是一个可以让你的PC项目自适应屏幕的工具，其原理非常简单，即在scale等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用 autofit.js 不会挤压、拉伸元素，它只是单纯的设置了容器的宽高，示例代码如下所示：

<template>
  <div style="width: 400px; height: 400px; background: red;"></div>
  <div id="ignore" style="margin: 500px; width: 80px; height: 50px; background: green;"></div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeMount } from 'vue';
import autofit from 'autofit.js'

onMounted(() => {
  autofit.init(
    {
      dh: 1080,
      dw: 1920,
      el: "#app",
      resize: true,
    },
  )
  autofit.init({
    ignore: [
      {
        el: "#ignore", //必填
        height: "50px", //可选，需注明单位
        width: "80px", //可选，需注明单位
        scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
        fontSize: 26, //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
      },
    ],
  });
})
onBeforeMount(() => {
  autofit.off()
})
</script>

最终呈现的效果如下所示：

v-scale-screen插件实现

该插件通常用于调整屏幕的显示比例，特别是在进行 Web 开发或设计时，允许开发人员或设计师在不同的屏幕尺寸和分辨率下测试和调整页面布局，确保网站在各种设备上都能良好显示，其地址为：地址 ，实现的效果如下所示，怎么说呢，看起来效果还不错：

终端执行如下命令进行下载安装：（vue3的版本就安装"v-scale-screen": "^2.2.0",版本号为2的即可）：

npm install v-scale-screen
# or
yarn add v-scale-screen

然后使用如下代码即可实现功能，非常的简便：

<template>
  <VScaleScreen>
    <img src="./assets/charts.png" alt="" />
  </VScaleScreen>
</template>

<script lang="ts" setup>
import VScaleScreen from "v-scale-screen";
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

实现的效果如下所示：

当然其还有对应的配置项内容，这里就不再一一赘述了，如下所示：

总结：每种解决方案都有其优点和限制，选择合适的方案应根据项目的具体需求、目标用户的设备以及开发资源来决定。在实际应用中，灵活运用多种方法，结合测试和优化，可以有效提升用户体验并确保在各种设备上呈现出色的界面效果。