数据大屏适配方案

做大屏之前，试过几种方案，业务需求是要宽高自适应的，如果是要宽高自适应的，我是比较推荐这个的方案，
其他：不推荐使用rem，尤其是还掺杂了UI库的，不然可能要走回头路。

<template>
  <div
    class="hello fit_box"
    ref="fit_box"
    :style="{
      width: width + 'px',
      height: height + 'px',
    }"
  >
    <p>测试数据大屏适配方案</p>
  </div>
</template>
<!-- 测试数据大屏适配方案 -->
<script>
export default {
  name: "echartsData",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      width: 3840,
      height: 2160,
    };
  },
  computed: {},
  mounted() {
    //适配
    this.setScale();
    window.addEventListener("resize", this.debounce(this.setScale));
  },
  methods: {
    // 适配
    setScale() {
      const { width, height } = this;
      const wh = window.innerHeight / height;
      const ww = window.innerWidth / width;
      if (this.$refs.fit_box) {
        this.$refs.fit_box.style.setProperty(
          "transform",
          "scale(" + ww + "," + wh + ") translate(-50%, -50%)"
        );
      }
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return function () {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
  },
  beforeDestroy() {},
};
</script>
<style scoped>
    #fit_box {
        --scale: 1;
    }
    .fit_box {
        position: absolute;
        display: flex;
        flex-direction: column;
        transform-origin: 0 0;
        left: 50%;
        top: 50%;
        transition: 0.3s;
        z-index: 999;
    }
    .hello {
        background-color: #23c888;
    }
</style>

注意：这里用图片标记一下重点注意的地方