大屏可视化

最新推荐文章于 2024-03-29 14:56:11 发布

m0_59023231

最新推荐文章于 2024-03-29 14:56:11 发布

阅读量2.6k

点赞数 2

文章标签： echarts

本文链接：https://blog.csdn.net/m0_59023231/article/details/123899006

版权

大屏可视化

大屏可视化一般是用于大屏战术，而不同的大屏设备分辨率和宽高比不太一样，所以同一个网页需要在不同的大屏上完美展示，就需要做大屏适配，大屏适配有以下两种结局方案：

1，使用网页缩放

用法：适用于缩放比例不大，微调的大屏，原始比例和大屏比例差比不大的情况

原理：计算屏幕窗口显示区域与box尺寸的比例，然后让box缩放相应的比例进行拉伸

按照UI设计稿的原始尺寸(1920*1080)，使用px为单位实现固定尺寸的图表，适配时，使王爷缩放以占满整个屏幕

好处：操作方便，不易出错
去点：图形和文字会拉伸变形

 #box {
             width: 1920px; 
            height: 1080px; 
}
body {
            overflow: hidden;
}

<script>
    // 使图表全屏显示
    function fullScreen() {
        // 使用缩放方案使容器box铺满整个屏幕
        // 原理:计算屏幕窗口显示区域与box尺寸的比例，然后让box缩放相应的比例进行拉伸
        // 计算：水平方向的拉伸比例
        var ratioX = window.innerWidth / box.offsetWidth;
        // 计算垂直方向的拉伸比例
        var ratioV = window.innerHeight / box.offsetHeight;
        // 让box容器拉伸缩放到全屏
        $("#box").css({
            transform: `scale(${ratioX},${ratioV})`,
            // 设置缩放基准点为左上角，视图拉伸时左上角不动，往右下角拉伸，(默认基准点在中心)
            transformOrigin: '0 0'
        })
    }
    window.onresize = fullScreen;
</script>

先计算水平方向和垂直方向的拉伸比例，然后用transform:scale(x,y) 来设置box容器的缩放比例，x为水平方向的拉伸比例，y为垂直方向的拉伸比例。然后你会发现设置完之后会有留白，是因为缩放的基准点此时是在中心。所以通过transformOrigin设置缩放基准点为左上角，视图拉伸时左上角不懂，往右下角拉伸（默认基准点在中心）。当窗口大小发生改变时，进行大屏配适。

2，图表的尺寸和位置统一使用vw，vh做单位，宽度都用vw单位，高度都用vh单位

视口：viewport 指的是浏览器显示窗口，这里有两个新增单位 vw和vh

vw ：viewport width 视口宽度，显示区域宽度
vh ：viewport height 视口高度，显示区域高度
vw 和vh 是css中使用的长度单位
1vw 是显示宽度的百分之一 100vw == 窗口宽
1vh 是显示高度的百分之一 100vh == 窗口高
大屏适配化组成的每一个盒子或者图片都需要用vw 和 vh 设置。把px都换成vw 和 vh

    #box {
            /* width: 1920px; */
            width: 100vw;
            /* height: 1080px; */
            height: 100vh;
            background-image: url("imgs/bg.png");
            background-size: 100vw 100vh;
        }

补：css动画旋转

 <img id="lbx" src="./imgs/lbx.png" alt="">

         #center #lbx {
            position: absolute;
            left: -63px;
            top: -63px;
            animation: lbxRotate 10s linear infinite;
        }

        /* css动画旋转 */
        @keyframes lbxRotate {
            from {
                transform: rotate(0)
            }

            to {
                transform: rotate(360deg)
            }
        }