vue 大屏适配 缩放方案

<template>
  <div
    class="container"
    :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      // 适配样式
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    // 初始化charts
    this.$nextTick(() => {
      this.chartsInit()
    })
    let that = this
    that.setScale()
    // echarts图表自适应
    window.addEventListener('resize', () => {
      this.setScale()
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
      this.chart4.resize()
      this.chart5.resize()
      this.chart6.resize()
      this.chart7.resize()
      this.chart8.resize()
    })
  },
  methods: {
    setScale() {
      let scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    }
  },
  // 销毁resize
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
      this.chart4.resize()
      this.chart5.resize()
      this.chart6.resize()
      this.chart7.resize()
      this.chart8.resize()
    })
  }
}
</script>
<style lang="less">
.container {
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  transform-origin: 0 0;
}
</style>