谈谈大屏可视化制作

布局

刚好，不久前做了大屏可视化项目，就想着做做博客。大屏可视化如何布局，整体布局使用比例进行计算，满足 屏幕宽度:屏幕高度 > 设计稿宽度 : 设计稿高度时让高度撑满，当满足 屏幕宽度:屏幕高度 < 设计稿宽度 : 设计稿高度时,让宽度撑满。

假设设计稿的宽高比为16：9，如下图是第二种情况宽度不够时

代码实现

let fn = ()=>{
       //计算设备的可视区宽度和高度
       const clientWidth =  window.innerWidth || 
       document.documentElement.clientWidth ||
       document.body.clientWidth;
       const clientHeight = window.innerHeight ||
       document.documentElement.clientHeight ||
       document.body.clientHeight;
       let width;
       if (clientWidth / clientHeight > 16 / 9) {
       //说明设备屏幕太宽（相对设备高度而言）
          window.width = width = (clientHeight * 16) / 9;
        } else {
          //说明设备屏幕宽度不够
          window.width = width = clientWidth;
        }
        const height = width / (16 / 9);
        //动态设置rem  1rem = 1%屏幕的宽度
        const string = `
              html{
                  font-size:${width / 100}px
              }
        `;
        const style = document.createElement('style')
        style.innerText = string
        document.querySelector('head').appendChild(style)
        //app是页面根元素
        const app = document.getElementById("app");
        app.style.width = width + "px";
        app.style.height = height + "px";
        //宽度不够时，页面上下居中;高度不够时，设置margin:0 auto;(通过css设置，下面margin-top为0，不影响)
        app.style.marginTop = (clientHeight - height)/2 + 'px'
}
fn()
window.onresize = fn

index.scss

#app {
  margin: 0 auto;
}