组件

<template>
  <div class="screen-container" ref="screenRef">
    <div class="screen-content" :style="transformStyle">
      <!-- 你的内容 -->
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const screenRef = ref(null)

// 设计稿尺寸（默认 1920x1080）
const designWidth = 1920
const designHeight = 1080

// 缩放值
const scale = ref(1)

// 计算缩放比例
const calcScale = () => {
  if (!screenRef.value) return

  const { clientWidth: w, clientHeight: h } = screenRef.value

  // 按照设计稿宽高比等比缩放
  const screenRatio = w / h
  const designRatio = designWidth / designHeight

  let scaleX, scaleY

  if (screenRatio > designRatio) {
    // 宽屏更高，按高度缩放
    scaleY = h / designHeight
    scaleX = scaleY
  } else {
    // 高屏更高，按宽度缩放
    scaleX = w / designWidth
    scaleY = scaleX
  }

  scale.value = Math.min(scaleX, scaleY)
}

// 监听 resize
const resizeHandler = () => {
  calcScale()
}

onMounted(() => {
  window.addEventListener('resize', resizeHandler)
  calcScale()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})

// transform 样式
const transformStyle = computed(() => {
  return {
    transform: `scale(${scale.value})`,
    transformOrigin: 'left top',
    width: `${designWidth}px`,
    height: `${designHeight}px`,
    position: 'relative'
  }
})
</script>

<style scoped>
.screen-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.screen-content {
  width: 1920px;
  height: 1080px;
}
</style>

使用

<template>
  <ScaleScreen>
    <div style="width: 1920px; height: 1080px;">
      <h1>这是我的全屏大屏</h1>
      <!-- 放置 ECharts 图表等内容 -->
    </div>
  </ScaleScreen>
</template>

<script setup>
import ScaleScreen from './components/ScaleScreen.vue'
</script>