eChart会在不同分辨率的显示器中显示，要求显示内容可以等比例缩放，transform的原点是内容的中心位置，直接使用transform.scale缩放会导致有些内容溢出屏幕

1. screen的左上角移动到屏幕的中心
2. 计算出比例，以screen左上角为原点，将screen进行缩放
3. 将screen向视窗的左和上移动screen自身50%的距离
4. 监听视窗的变化，随时计算screen的位置

<template><!-- 背景 --><div class="container"><!-- 大屏的容器 --><div class="screen" ref="screen"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
// 大屏显示内容的实例
const screen = ref()
/*** 以视窗与大屏的宽高比的值，以值比较小的比例进行缩放，使大屏的内容在屏幕中能够全部显示* 默认屏幕显示分辨率为1920*1080* @param width 大屏内容的宽* @param height 大屏内容的高*/
function init(width = 1920, height = 1080) {const scale = Math.min(window.innerWidth / width,window.innerHeight / height,)// 设置大屏的css属性。transform.scale()，将元素进行缩放,参数为缩放比例，// transform.translate()方法，参数为位移的偏移量,百分比是自身宽（高）的百分比screen.value.style.transform = `scale(${scale}) translate(-50%, -50%)`return scale
}
onMounted(() => init())// 当视窗大小变化时，重新计算大屏的css属性
window.onresize = () => init()
</script><style scoped lang="scss">
.container {// 背景图显示为全屏width: 100vw;height: 100vh;background: url('./images/bg.png') no-repeat;background-size: cover;.screen {// 大屏的stylewidth: 1920px;height: 1080px;// position定位，fixed固定定位，只看浏览器的窗口，与父元素等无关position: fixed;// 固定定位的偏移量，left与视窗的左边距，top与视窗的上边距，百分比是视窗的百分比left: 50%;top: 50%;background: red;// 变形的原点，以左上角为原点，由于固定定位的偏移量，此原点现在处于视窗的正中心transform-origin: left top;}
}
</style>