几行代码实现vue3数据大屏自适应~~

<script setup lang='ts'>
  import {onMounted, ref} from 'vue';
  import {useRouter} from "vue-router";
  import * as echarts from 'echarts';
  import {init, EChartsOption} from 'echarts';
  import mapJson from './modules/china.json'
  const loading = ref(true)
  // 获取自适应的盒子，也就是包裹echarts的最外层父级盒子
  const dataScreenRef = ref<HTMLElement | null>(null);
  onMounted(() => {
    // 重点一：
    // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
    if (dataScreenRef.value) {
      dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
      dataScreenRef.value.style.width = `1920px`;
      dataScreenRef.value.style.height = `1080px`;
    }
    // 初始化echarts
    initChart();
    // 重点二：
    // 为浏览器绑定事件
    window.addEventListener("resize", resize);
  });
  // 重点三：
  // 根据浏览器大小推断缩放比例
  const getScale = (width = 1920, height = 1080) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
  };
  // 重点四：
  // 监听浏览器 resize 事件
  const resize = () => {
    if (dataScreenRef.value) {
      dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
    // 使用了 scale 的echarts其实不需要需要重新计算缩放比例
    // Object.values(dataScreen).forEach(chart => {
    //   chart && chart.resize();
    // });
  };
  // 注册echarts
  function initChart() {
    const myChart = init(document.getElementById('map') as HTMLDivElement)
    const myChart2 = init(document.getElementById('map2') as HTMLDivElement)
    const myChart3 = init(document.getElementById('map3') as HTMLDivElement)
    const myChart4 = init(document.getElementById('map4') as HTMLDivElement)
    const myChart5 = init(document.getElementById('map5') as HTMLDivElement)
    const myChart6 = init(document.getElementById('map6') as HTMLDivElement)
    echarts.registerMap('china', mapJson)
    const option = <EChartsOption>{
      backgroundColor: "transparent",
      series: [
        {
          type: "map",
          roam: false,
          top: 100,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 1.5,
              areaColor: "#12235c",
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "green",
            },
          },
          zoom: 1.5,
          roam: true,
          map: "china", //使用
        },
      ],
    }
    myChart.setOption(option)
    myChart2.setOption(option)
    myChart3.setOption(option)
    myChart4.setOption(option)
    myChart5.setOption(option)
    myChart6.setOption(option)
    window.addEventListener("resize", function () {
      myChart.resize();
      myChart2.resize();
      myChart3.resize();
      myChart4.resize();
      myChart5.resize();
      myChart6.resize();
    });
    setTimeout(() => {
      loading.value = false
    }, 2000)
  }
  // 返回首页
  const router = useRouter();
  function backIndex() {
    // console.log('关闭');
    router.push('/')
  }
  // 获取当前时间
  const currentDate = ref('');
  const a = ["日", "一", "二", "三", "四", "五", "六"];
  const week = ref(null);
  const str = ref('');
  const timeInterval = setInterval(()=>{
    currentDate.value = new Date().toLocaleString()
    week.value = new Date().getDay();
    str.value = "今天是星期"+ a[week.value]
  },1000)
</script>
<template>
  <div class="screen-bg" v-loading="loading">
    <div class="container" ref="dataScreenRef">
      <div class="header">
        <div class="date">{{currentDate + '&nbsp; &nbsp; &nbsp; ' + str}}</div>
        <div class="title">国内贫富差距分布图</div>
            <div class="light" @click="backIndex">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              X
            </div>
      </div>
      <div class="body">
        <div class="map-box">
          <div id="map"></div>
        </div>
        <div class="right-data">
          <div class="item-box">
            <div id="map2"></div>
          </div>
          <div class="item-box">
            <div id="map3"></div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="item-box">
          <div id="map4"></div>
        </div>
        <div class="item-box">
          <div id="map5"></div>
        </div>
        <div class="item-box">
          <div id="map6"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
  // 背景
  .screen-bg {
    width: 100%;
    height: 100%;
    background: url('@/assets/dataScreen/background-6.png') no-repeat;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
    .light {
      width: 40px;
      height: 30px;
      position: absolute;
      top: 42px;
      right: 40px;
      z-index: 99999;
      transform: translate(-50%, -50%);
      /* width: fit-content; */
      text-align: center;
      line-height: 30px;
      color: #ffffff;
      font-size: 20px;
      text-transform: uppercase;
      transition: 0.5s;
      letter-spacing: 4px;
      cursor: pointer;
      overflow: hidden;
    }
    .light:hover {
      background-color: #ffffff;
      color: #050801;
      box-shadow: 0 0 5px #ffffff,
      0 0 25px #ffffff,
      0 0 50px #ffffff,
      0 0 200px #ffffff;
    }
    .light div {
      position: absolute;
    }
    .light div:nth-child(1) {
      width: 100%;
      height: 2px;
      top: 0;
      left: -100%;
      background: linear-gradient(to right, transparent, #ffffff);
      animation: animate1 1s linear infinite;
    }
    .light div:nth-child(2) {
      width: 2px;
      height: 100%;
      top: -100%;
      right: 0;
      background: linear-gradient(to bottom, transparent, #ffffff);
      animation: animate2 1s linear infinite;
      animation-delay: 0.25s;
    }
    .light div:nth-child(3) {
      width: 100%;
      height: 2px;
      bottom: 0;
      right: -100%;
      background: linear-gradient(to left, transparent, #ffffff);
      animation: animate3 1s linear infinite;
      animation-delay: 0.5s;
    }
    .light div:nth-child(4) {
      width: 2px;
      height: 100%;
      bottom: -100%;
      left: 0;
      background: linear-gradient(to top, transparent, #ffffff);
      animation: animate4 1s linear infinite;
      animation-delay: 0.75s;
    }
    @keyframes animate1 {
      0% {
        left: -100%;
      }
      50%,
      100% {
        left: 100%;
      }
    }
    @keyframes animate2 {
      0% {
        top: -100%;
      }
      50%,
      100% {
        top: 100%;
      }
    }
    @keyframes animate3 {
      0% {
        right: -100%;
      }
      50%,
      100% {
        right: 100%;
      }
    }
    @keyframes animate4 {
      0% {
        bottom: -100%;
      }
      50%,
      100% {
        bottom: 100%;
      }
    }
    // 中心容器
    .container {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 999;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: all 0.3s;
      transform-origin: left top;
      /*!* 设置一个最小的宽度 *!*/
      min-width: 1500px;
      /* 设置一个最大的宽度 */
      max-width: 1500px;
      margin: 0 auto;
      padding-top: 20px;
      .header {
        position: relative;
        height: 77px;
        margin-bottom: 20px;
        background-image: url('@/assets/dataScreen/pic-12.png');
        background-repeat: no-repeat;
        background-size: cover;
        .date {
          position: absolute;
          left: 100px;
          top: 55%;
          transform: translateY(-50%);
          font-family: FZHei-B01S, Arial, sans-serif;
          font-size: 20px;
          color: rgb(255, 255, 255);
          font-weight: normal;
          justify-content: center;
          text-align: center;
        }
        .title {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-family: FZHei-B01S, Arial, sans-serif;
          font-size: 30px;
          color: rgb(255, 255, 255);
          font-weight: normal;
          justify-content: center;
          text-align: center;
        }
      }
      .body {
        display: flex;
        justify-content: space-between;
        .map-box {
          width: 700px;
          height: 430px;
          margin-right: 20px;
          border-width: 2px;
          border-color: rgb(14, 71, 143);
          border-style: solid;
          // background-color: rgba(14, 71, 143, 0.32);
          // background-clip: padding-box;
          background-image: url('@/assets/dataScreen/border-2.gif');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          filter: blur(0px);
          #map {
            width: 100%;
            height: 100%;
          }
        }
        .right-data {
          flex: 1;
          display: flex;
          justify-content: space-between;
          background-color: transparent;
          .item-box {
            width: 350px;
            border-width: 2px;
            border-color: rgb(14, 71, 143);
            border-style: solid;
            background-image: url('@/assets/dataScreen/border-2.gif');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            filter: blur(0px);
            &:last-child {
              margin-right: 0;
            }
            #map2,
            #map3 {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .footer {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .item-box {
          width: 440px;
          height: 250px;
          border-width: 2px;
          border-color: rgb(14, 71, 143);
          border-style: solid;
          background-image: url('@/assets/dataScreen/border-2.gif');
          background-size: contain;
          background-repeat: no-repeat;
          filter: blur(0px);
          #map4,
          #map5,
          #map6 {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }</style>