前言

一、可视化技术

1. 技术分类

1. 底层图形引擎
   • Skia、OpenGL等。
2. W3C提供
   • CSS3、Canvas、SVG、WebGL。
3. 第三方可视化库
   • ZRender、Echarts、AntV、Highcharts、D3.js、Three.js、百度地图、高德地图等。
4. 低代码可视化平台
   • 阿里云（DataV）、腾讯云图、网易有数（EasyScreen）、帆软等。

2. 技术依赖

• Canvas、SVG基于Skia引擎。
• WebGL基于OpenGL引擎。
• ZRender、Echarts、AntV、Highcharts、D3.js基于Canvas和SVG。
• Three.js基于WebGL。

二、可视化方案

1.概念

1.1设备分类

1. PC端电脑
   • 1920 * 1080（少部分电脑支持输出4K屏，如小米笔记本）。
2. 移动设备
   • 750 * auto。
3. 大屏设备
   • 指挥大厅、展厅、会展大屏。其实1920 * 1080 和 3840 * 2160（4K屏）也属于大屏。

1.2大屏的应用

主要用在数据可视化。涉及业务如零售、物流、电力、水利、环保、交通、医疗等。

1.3大屏的硬件设备

拼接屏、LED屏、投影等。

1.4大屏设计稿尺寸

1. 拼接屏

   • 可以按拼接屏的实际尺寸设计。如6 * 3的是(6 * 1920) * (3 * 1080)。但是超过4K屏的尺寸，硬件会出现问题，如卡顿、GPU压力过大、高负荷运算等。
   • 所以设计稿建议保持在4K内。保持大屏的比例等比例缩放即可。
   • 比如
   • 1920 * 1080 （1 * 1），设计稿尺寸：1920 * 1080。
   • 3840 * 2160（2 * 2，4K屏），设计稿尺寸：3840 * 2160。
   • 5760 * 3240（3 * 3），设计稿尺寸：5760 * 3240。
   • 7680 * 3240（4 * 3），设计稿尺寸：3840 * 2160需要出1倍图和2倍图，按3840 * 2160比例用2倍图开发；或者7680 * 3240。
   • 9600 * 3240（5 * 3），设计稿尺寸：4800 * 1620需要出1倍图和2倍图，用2倍图开发。

2. LED屏

   • 设计原则与拼接屏一致。

3. 移动端大屏

   • 按实际尺寸设计。

总结：按输出分辨率设计。拼接后像素在4K左右，按总和设计。总和设计不建议超过4K，超过时可以按比例缩小设计稿。优先考虑目标屏幕的适配，在小屏可根据等比例缩放或居中显示。

2.大屏适配方案

2.1适配原则

• 屏幕比例为16:9
  • 等比例缩放。
• 屏幕比例不为16:9
  • 高度铺满等比例缩放，居左或居中展示。
  • 宽度铺满等比例缩放，高度出现滚动条。

2.2方案讨论

浏览器添加大屏设备。

2.2.1百分比设置（不推荐）

不同元素（属性）的百分比值，对应的参照物不同，所以不能统一设置。

2.2.2rem单位+动态html的font-size（可用，但已过时）

1. 将屏幕宽度24等分。
2. 使用lib-flexible库。

/* 1920设计稿：1rem = (1920 / 24)px = 80px */
/* 1920px = (1920 / 80)rem = 24rem */

2.2.3vw单位

屏幕的宽默认为100vw，即把屏幕宽度100等分。

/* 1920设计稿：100vw = (1920 / 100)px，1vw = 19.2px */
/* 1920px = (1920 / 19.2)vw = 100vw */

2.2.4flex弹性布局

2.2.5scale等比例缩放（推荐）

动态计算网页宽高比，决定是否按宽度的比例进行缩放。

<style>
body {
  position: relative;
  width: 1920px;
  height: 1080px;
  /* 指定缩放的原点在左上角 */
  transform-origin: left top;
}
</style>
<script>
function setUnit () {
    // 1.设计稿尺寸
    const targetX = 1920
    const targetY = 1080
    const targetRatio = 16/9
    // 2.拿到当前设备（浏览器）宽高
    const currentX = document.documentElement.clientWidth || document.body.clientWidth
    const currentY = document.documentElement.clientHeight || document.body.clientHeight
    // 3.计算缩放比例
    let scaleRatio = currentX / targetX
    const currentRatio = currentX / currentY

    // 超宽屏
    if (currentRatio >= targetRatio) {
        scaleRatio = currentY / targetY
        // 4.缩放页面
        document.body.style = `width: ${targetX}; height: ${targetY}; transform: scale(${scaleRatio}) translateX(-50%); left: 50%`
    } else {
        // 4.缩放页面
        document.body.style = `width: ${targetX}; height: ${targetY}; transform: scale(${scaleRatio})`
    }
}

// 保证第一次进来时，可以设置一次font-size
setUnit()

// 当屏幕尺寸发生变化，实时修改html的font-size
window.addEventListener('resize', setUnit)
</script>

2.3方案对比

1. vw和rem存在的问题：

   • 在JavaScript中添加样式时，单位需要手动设置。
   • 第三方库字体等默认单位都是px，比如elementui、echarts，因此通常需要层叠第三方库的样式。
   • 当大屏比例更大时，有些字体还需要相应的调整字号。

2. scale对比vw和rem的优势：

   • 使用简单，不需要换算单位。
   • 因此在使用第三方库时不需要考虑单位换算问题。
   • 由于浏览器字体默认最小不能小于12px，导致vw和rem无法设置小于12px的字体，scale没有这个问题。

2.4大屏开发注意事项

1. 字体大小设置问题（非scale方案需要考虑）
   • 在JavaScript中添加样式，需要手动设置单位为vw或者rem。
   • 使用第三方库，需要层叠第三方库样式。
   • 大屏比例太大时，需要调整字体字号。
2. 图片模糊问题
   • 切图时切1倍图和2倍图，大屏用大图，小屏用小图。
   • 建议使用SVG矢量图，保证放大缩小都不会失真。
3. Echarts渲染引擎的选择
   • 使用SVG渲染引擎，SVG图扩展性更好。
4. 动画卡顿优化
   • 创建新的渲染层、启用GPU加速、善用CSS3形变动画。
   • 少用渐变和高斯模糊、当不需要动画时及时关闭动画。

三、总结

大屏设计稿尽量不超过4K的尺寸，超过时等比缩小生成设计稿。开发时动态计算页面宽高比，再决定是否按宽度的比例用scale进行缩放。满足16:9的比例则等比缩放，不满足则按高度等比缩放居中展示或者按宽度等比缩放高度出现滚动条。

附录