可视化大屏自适应/适配方案总结（适配地图）

ifHappyEveryDay@

已于 2023-07-16 16:33:26 修改

阅读量1.4k

点赞数 2

文章标签： javascript 开发语言 ecmascript 可视化

于 2023-07-16 14:18:28 首次发布

本文链接：https://blog.csdn.net/luoawai/article/details/131749982

版权

文章讨论了在处理可视化大屏适配时遇到的问题，如白边和复杂性。介绍了vw/vh、scale及rem+vwvh三种常见适配方案的优缺点，并提出使用scale结合反向缩放的解决思路。此外，文章推荐了autofit.js库作为最新解决方案，它能有效处理适配问题，特别是地图的适配，并提供了配置示例。

摘要由CSDN通过智能技术生成

1.背景

可视化大屏几乎在每个公司的有相对应的产品或者项目多多少少都会有所涉及，当去接手的时候再去了解可就晚了
可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。

2.常见的自适应/适配方案

vw/vh方案

概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦

scale方案

概述：也是目前效果最好的一个方案
优点：代码量少，适配简单、一次处理后不需要在各个图表中再去单独适配.
缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题

rem + vw vh方案

概述：这名字一听就麻烦，具体方法为获得 rem 的基准值，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
优点：布局的自适应代码量少，适配简单
缺点：留白，有时图表需要单独适配字体

解决思路：

使用scale来进行缩放，再将其放大回来

function keepFit(designWidth, designHeight, renderDom) {
  let clientHeight = document.documentElement.clientHeight;
  let clientWidth = document.documentElement.clientWidth;
  let scale = 1;
  if (clientWidth / clientHeight < designWidth / designHeight) {
    scale = (clientWidth / designWidth)
    document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
  } else {
    scale = (clientHeight / designHeight)
    document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
  }
  document.querySelector(renderDom).style.transform = `scale(${scale})`;
}

3.最新解决方案（可以解决适配地图问题）

1.npm下载

npm i autofit.js

2.引入

import autofit from 'autofit.js'

3.使用

// App.vue 需要在renderDom挂载到dom之后，才可以生效
export default {  
  mounted() {
  autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    })
  },
}

可选配置

  * - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器 
   * - designWidth（可选）：设计稿的宽度，默认是 1920 
   * - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
   * - resize（可选）：是否监听resize事件，默认是 true