大屏可视化 适配方案 scale方案详解

常见的几种可视化适配方案如下

• vw，vh：主要是将设计稿px通过计算换算成vw，vh， 可以进行同比缩放但是同时又不会出现白边的情况【唯一的缺陷是比较麻烦：要为每一个图表单独设置 字体、间距、位移 的适配】

• scale： 根据屏幕大小对图表进行等比缩放，通过设计稿宽高比 与 窗口宽高比 大小 决定使用 宽宽比还是高高比，通过比值来控制图表大小 简单代码量小【因为是使用比值， 所以会出现屏幕白边的情况， 当屏幕过大时字体会有一点模糊， 当缩放比过大时 事件热区会发生偏移】

• rem + vh，vw：算是上面两个方案的结合，会有白边，且要单个设置

在项目中我使用的是 scale属性 方案【因为在GitHub上有现成插件可以直接使用，方便开发】 具体原理代码如下

敲定 缩放比例，并渲染

function handleScreenAuto(){
    // scale 比例计算
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 960; //设计稿的高度
    
    // 窗口和设计稿的宽高比
    const windowRatio = document.documentElement.clientWidth / document.documentElement.clientHeight
    const designRatio = designDraftWidth / designDraftHeight
    
    // 高高比
    const widths = document.documentElement.clientWidth / designDraftWidth
    // 宽宽比
    const heights = document.documentElement.clientHeight / designDraftHeight
    
    // 根据 窗口比值大小 和 设计稿比值大小 判断使用哪一个比值【高高比，宽宽比】
    const scale = windowRatio < designRatio ? widths ： heights； 
    
    // 定位元素 添加 style 样式 transform; 
    document.querySelector().style.transfrom = `scale(${scale}) translate(-50%, -50%)`
}

钩子函数:

为了在窗口改变大小时触发， 将封装好的方法绑定在window 的onresize上面， 保证 窗口改变大小的时候进行触发， 代码运行时机在 mounted钩子函数中执行

onMounted() {
  // 初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  // 绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();
},

最后在 组件销毁后 将方法释放掉

onUnmounted(){
  window.onresize = null
}

居中属性作用展示

css样式表：

/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/  
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  <!--设计稿的宽度-->
        height: 960px;  <!--设计稿的高度-->
        transform-origin: 0 0; 
        position: absolute;
        left: 50%;
        top: 50%;
    }
}

• transfrom：translate(-50%, -50%)
• transform-origin: 0 0;
• position: absolute; left: 50%; top: 50%;

引用文档：juejin.cn/post/716393...