eChart显示时等比例缩放-Toy模板网

这篇具有很好参考价值的文章主要介绍了eChart显示时等比例缩放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

eCharts会在不同分辨率的显示器中显示，要求显示内容可以等比例缩放，transform的原点是内容的中心位置，直接使用transform.scale缩放会导致有些内容溢出屏幕文章来源地址https://www.toymoban.com/news/detail-782960.html

screen的左上角移动到屏幕的中心
计算出比例，以screen左上角为原点，将screen进行缩放
将screen向视窗的左和上移动screen自身50%的距离
监听视窗的变化，随时计算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>