数据大屏适配的解决方案

1、vw和vh

优点：简单。

单位自己换算，

问题：echarts中的文字不支持vw和vh，（文字大小没法调）

2、css3中的scale缩放实现大屏适配 

优点：按照原稿的尺寸使用，

缺点：两侧留白

<template>
  <div id="container_screen">

    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <div class="top">
        <TopVue />
      </div>
      <div class="bottom">
        <leftVue class="left" />
        <middleVue class="center" />
        <rightVue class="right" />
      </div>
    </div>

  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from "vue"
import TopVue from "./components/top/index.vue"
import leftVue from "./components/bottom/left/index.vue"
import middleVue from "./components/bottom/middle/index.vue"
import rightVue from "./components/bottom/right/index.vue"
// 获取数据大屏展示内容盒子的DOM元素

let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
});

// 定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

// 监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>
<style lang='scss' scoped>
#container_screen {
  height: 100vh;
  width: 100vw;

  background: url(./images/bg.jpg) no-repeat center;
  background-size: 100% 100%;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
  
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .top {
      width: 100%;
      height: 40px;
      background: ivory;
    }

    .bottom {
      display: flex;
      height: 1040px;

      .right {
        flex: 1;
      }

      .left {
        flex: 1;
      }

      .center {
        flex: 2;
      }
    }
  }
}
</style>