一行代码搞定前端可视化大屏

大屏适配解决方案

做可视化大屏时，在适配屏幕上，有四种常用的解决方案：

1. 根据屏幕尺寸随意缩放

   • 适用场景：留白不可接受的情况下使用
   • 优点：占满屏幕，美观
   • 缺点：屏幕尺寸比和设计稿尺寸比不一致时，导致变形

1. 固定大屏头部，内容部分自适应

   • 适用场景：图表变形不可接受的情况下使用
   • 优点：任意缩放，不会变形

   • 缺点：在屏幕尺寸比和设计稿尺寸比不一致适，导致留白多

     • 解决方案：留白部分放置背景图

1. 左右图表固定，地图部分自适应

   • 适用场景：地图和图表分开，地图部分占满屏幕，图表部分固定浮在地图上面
   • 优点：占满屏幕，美观

   • 缺点：

     • 1. 在小屏幕上，地图部分会太小，不够美观
     • 1. 在小屏幕上，图表的字也会太大，不够美观

2. 水平缩放，垂直滚动/水平滚动，垂直缩放/水平滚动、垂直滚动

   • 适用场景：在 pc 上使用，嵌入在其他系统中，左边（上边）有导航栏
   • 优点：不会缩放
   • 缺点：需要滚动才能看到全部内容

大屏适配技术方案

做个多个可视化大屏项目后，我们团队最终选择了第一种方案，也就是随意缩放

因为可视化大屏大部分情况是在大屏幕上显示，比如电视机，显示器等，这些屏幕的分辨率一般都是 16:9 我们的设计稿只需要按照 1920*1080 来设计就可以了

做缩放的技术，主要是 css 的 transform: scale，但是吧它会有 3 个问题：

1. 地图上的点位会出现偏移/点击位置不准
2. 使用到 overflow: scroll 的地方，文本可能会出现模糊
3. 在使用第三方组件时，比如下拉框等不会缩放

为了一劳永逸解决这些问题，决定造个轮子

核心代码

屏幕的宽高和设计稿的宽高比例，就是缩放比例，通过设置 transform: scale 就可以得到缩放效果

const realWidth = window.document.body.clientWidth;
const realHeight = window.document.body.clientHeight;
this.pageScale = {
  y: realHeight / designHeight,
  x: realWidth / designWidth,
};

.xxx {
  transform: scale(${this.pageScale.x}, ${this.pageScale.y});
}

为什么 x 和 y 都要单独设置呢？

反过来想，如果这样设置 transform: scale(scale)，宽高都会缩放，也就变成了整体缩放

这会导致有留白的地方（方案二是用着这种方式）

所以我们需要单独设置 x 和 y，当某个方向的缩放比不为 1 时，就进行缩放，另一个方向的缩放比可以保持不变

点位偏移和文本模糊问题

在高清屏（dpr > 2）不会触发（类似 mac 的屏幕就不会有），更多是出现在普通屏幕上（dpr = 1）

造成这个主要原因是 height * transformY(-50%) 的结果不是整数，为什么会出现这种现象：浏览器将图层拆分到 GPU 以进行 3D 转换，非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么精确

解决方案：

• 不使用 transformY(-50%)
• 在设置 scale 的 dom 上设置：transform-origin: 0 0;

参考链接：疑难杂症：运用 transform 导致文本模糊的现象探究

下拉框不能缩放

第三方组件的下拉框都脱离了文档流，一般都在 body 下，而 body 是不会缩放的

下拉框需要缩放，就需要额外设置

解决方案：

用 MutationObserver 去监听 dom 变化，当 dom 出现时动态设置 scale

提供参数 extraQuerySelectors，用于设置脱离文档流的 dom

scale/matrix

不同的图表，地图组件使用的缩放可能不一样，有些会用 scale，有些用 matrix

所以进行缩放时，尽量保持一致，避免不必要的 bug

提供参数 scaleType，用于设置缩放类型

使用

1. 安装

npm i adaptive
# 或
yarn add adaptive
# 或
pnpm i adaptive

1. 引入

import Adaptive from "adaptive";

1. 快速使用

const adaptive = new Adaptive({ querySelector: "#app" });

注意事项

要在 dom 加载完成后再初始化

1. react 中使用

useEffect(() => {
  const adaptive = new Adaptive({ querySelector: "#app" });
  return () => {
    adaptive.destroy();
  };
}, []);

1. vue 中使用

let adaptive;
onMounted(() => {
  adaptive = new Adaptive({ querySelector: "#app" });
});
onUnmounted(() => {
  adaptive.destroy();
});

1. 参数说明

querySelector: string // 大屏根选择器，必选
extraQuerySelectors?: string[]; // 需要额外缩放的 dom 选择器，可选
designWidth?: number; // 设计稿宽度，可选，默认 1920
designHeight?: number; // 设计稿高度，可选，默认 1080
type?: ScaleType; // 缩放类型，可选，默认 scale

最终实现效果

demo

git clone https://github.com/astak16/adaptorjs.git

cd adaptorjs

pnpm i

pnpm dev

除此之外，JNPF可视化开发平台是一款集成报表设计和大屏设计的在线报表平台，使用起来简单方便，可以帮助用户像excel一样设计页面。

使用JNPF报表平台，集成多方面优势，随意拖动组件，想设计成什么样子，设计成什么样子；JNPF大屏设计器，还提供了几十种模板，供你免费实用。用户不仅10分钟就可以设计一个炫酷大屏，还能在平台快速制作各种报表，实现报表的打印等。