跳到主要内容

大屏数据可视化

大屏方案都会留白，因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况

  • 开发大屏基本上都是为对应分辨率专门开发，我觉得这个缺点可以基本忽略，因为我们可以将背景色设置为大屏的基础色，这样留白部分不是太大基本没影响

适配大屏方案​

  • 原始方案：rem、vh/vw、scale

scale​

  • 使用scale缩放适配大屏

优缺点：​

  • 优点： 使用scale适配大屏。实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写rem单位，也不需要考虑单位使用失误导致适配不完全。您即使全部用position去定位在其他屏幕上都不会乱。（%和px随便用）
  • 缺点：
    • 不同尺寸屏幕，会留白 ，两边留白
    • 当缩放比例过大的时候，字体会有一点点模糊 （影响不是很大）
    • 地图上缩放会有问题 (点击坐标会不对，tooltip也有问题、地图偏移问题

解决留白问题：

  • 解决：是因为注入的宽高，跟电脑实际分辨率宽高不一致的原因
  • 问题：注入的宽高，跟分辨率宽高一致，为什么还有留白？
  1. 一致的话，只需要将浏览器全屏就可以看到正确的效果.
  2. 将注入的宽高换成document.documentElement.clientWidth、document.documentElement.clientHeight

rem​

  • rem是基于根元素html的字体大小的来计算的
  • 动态的计算出根元素html的font-size从而改变rem的大小。

rem如何动态改变根的html的font-size

原理：（felxible.js）

  • 1、计算html的font-size
  • 2、监听窗口的resize事件，来动态计算根元素html的font-size
js
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

为什么这里除以10，假设设计稿是750px

  • 习惯性定义把 10rem 定义为 屏幕宽度，人为定义的适配规则

  • 一整屏宽度 = 10rem = 750px

  • 1rem = 75px

  • html font-size = 750/10 = 75px

优缺点​

  • 优点: 适配简单

  • 缺点：

    • 高度无法适配

    • 图表需要单独对字体、间距、位移的适配

vw/vh​

  • vw/vh根据页面的可视区域来变化
  • 将像素值（px）按比例换算为视口宽度（vw）和视口高度（vh），能够实时计算图表尺寸、字体大小等
  • px转换vw/vh，可通过插件
    • px-to-vw
    • 原理：
      • 1、在写css的时候，仍然使用px。在构建的时候，会自动转成vw
      • 2、通过公式来计算vw/vh值
        • vw = (目标像素 px / 设计稿宽度) * 100
        • vh = (目标像素 px / 设计稿高度) * 100
      • 3、假设设计稿宽度是 375px（常见于移动端），并想将一个 150px 的元素转为 vw：
        • vw = (150 / 375) * 100 = 40vw

优缺点​

  • 优点: 适配简单

  • 缺点：

    • 图表需要单独对字体、间距、位移的适配

autofit.js​

  • 基于 scale 等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用 autofit.js 不会挤压、拉伸元素，它只是单纯的设置了容器的宽高

v-scale-screen、r-scale-screen​

  • 大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）， React 可以使用 r-scale-screen

FitScreen​

  • 基于缩放的大屏自适应解决方案的基本方法
  • 支持 vue2、vue3 以及 react