eChart显示时等比例缩放

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 {
        // 大屏的style
        width: 1920px;
        height: 1080px;
        // position定位,fixed固定定位,只看浏览器的窗口,与父元素等无关
        position: fixed;
        // 固定定位的偏移量,left与视窗的左边距,top与视窗的上边距,百分比是视窗的百分比
        left: 50%;
        top: 50%;
        background: red;
        // 变形的原点,以左上角为原点,由于固定定位的偏移量,此原点现在处于视窗的正中心
        transform-origin: left top;
    }
}
</style>

你可能感兴趣的:(前端,前端,echart,transform,缩放)