大家好，今天的文章由团队的 Range 老师分享。

随着前端技术不断攻城略地，越来越多的终端采用web技术来实现，作为 “大”前端的一员，越来越多小伙伴遇到了 大屏开发 这种场景。

今天，我们就来看看在大屏开发中，怎样换一种思路，来处理不同大屏的布局问题。

前言

授人以渔，不如授人以鱼。

本文将简单介绍数字大屏，以及常见问题的解决方法。

一、设计大屏的原则

大屏的展示都是基于业务的需求，不是简单的排数据，展示数据。所有的大屏都是基于业务这一基础上展示。

了解相关人员的业务需求是根本。例如：

• 对于设备而言相关人员想知道设备的运转是否正常、设备损耗多少、设备何时要修理、设备是否故障等；
• 对于事故而言相关人员想知道事故发生了多少、哪里发生事故、事故有没有减少、事故损失多少等等
• ……

知道了业务需求，我们才能帮助相关人员真正意义上的解决问题。才能更好的确定知道，知道数据要如何展示。

二、怎么选择常见图表？

提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等，没有把握数据的关联性经常会导致图表的误用。

图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 。

因此我们从数据出发，从功能角度对图表进行分类。找出指标里的数据主要集中在什么范围、有啥关联性、两者之间有啥差异、表现出怎样的规律等。

具体的选择，我们可以参考下图：

三、推荐购买还是自研？

主要考虑的因素：

• 工期

一般来说，自研的开发效率肯定慢，购买的大屏，直接套模板，可能更快。

• 成本

购买的大屏，公司之前购买的，是一年n万块钱，m个大屏。超过限定的数量，还得额外交钱。所以成本和大屏个数相关。

自己研发的话，那就是开发人员的成本了。

• 效率

购买的话，拖拖拽拽估计至少1-2天一个吧。完全可以脱离开发人员进行。

如果是自己开发，本人自己评估，框架搭建完以后，2天一个大屏的速度，如果大屏的数据需要调试接口，那么还会增加时间。

• 效果

购买的屏幕，更丰富，很多图标在开源框架找不到的。如果不在乎钱，那么推荐直接购买算了。

自己开发的效果肯定要打折一些。

• 适应性

如果设计稿玩的花样多，那么还是自研可靠点。

购买的大屏，样式偏向于固定。

四、有哪些常见的布局？

• 中心环绕

• 左右分布

• 上下分布

大家可以想想，这些布局怎么实现呢？

五、如何适配不同屏幕大小？

适配不同尺寸的屏幕是数字大屏项目中至关重要的任务，以确保在各种设备上都能提供良好的用户体验。

以下是一些步骤和技巧：

1. 使用响应式设计

相信大家对于响应式设计都有一定的了解，一般通过使用 CSS媒体查询（media）和 弹性布局来适应不同屏幕尺寸。

我们可以通过媒体查询设置断点，在不同屏幕宽度上切换布局和样式。比如给不同的断点分别设置字体大小、元素位置、内边距、边框等，以适应不同的屏幕尺寸。

弹性布局（Flexbox和Grid）相信大家也很了解，让元素相对于父元素进行弹性调整，适应不同的屏幕宽度。

2. 使用视口单位，限制使用绝对尺寸

视口单位（如vw、vh、vmin、vmax）允许你以相对于视口尺寸的方式设置元素的尺寸，这可以让你的内容能够根据屏幕尺寸自适应。

同时，应该尽量避免使用固定像素值来定义尺寸

3. 优化交互元素

对于交互元素（如按钮、链接等），确保它们在不同尺寸的屏幕上有足够的点击区域。这有助于避免用户在小屏幕上难以点击的问题。

4. 适当的内容截断

在小屏幕上，可能需要考虑对内容进行截断，以避免信息过于拥挤。可以使用省略号或折叠等方式来管理内容长度。

5. 计算屏幕缩放比(scale)

使用 scale 适配大屏，在大部分时候都是合适的解决方案。

支持在任何分辨率的电脑上均可安然运作，无需特定编写rem单位，也不需要考虑单位使用失误导致适配不完全，即使整个页面都用 position 去定位，在其他屏幕上都不会乱，而且 % 和 px 都随便用。

原理其实也很简单：

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

话不多说，直接上代码：

<div className="screen-wrapper">
    <div className="screen" id="screen">

    </div>
 </div>

<script>
export default {
mounted() {
  // 初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  // 绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();
},
deleted() {
  window.onresize = null;
},
methods: {
  // 数据大屏自适应函数
  handleScreenAuto() {
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 960; //设计稿的高度
    // 根据屏幕的变化适配的比例
    const scale =
      document.documentElement.clientWidth /
        document.documentElement.clientHeight <
      designDraftWidth / designDraftHeight
        ? document.documentElement.clientWidth / designDraftWidth
        : document.documentElement.clientHeight / designDraftHeight;
    // 缩放比例
    document.querySelector(
      '#screen',
    ).style.transform = `scale(${scale}) translate(-50%, -50%)`;
  },
},
};
</script>

.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //设计稿的宽度
        height: 960px;  //设计稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
}

该怎么计算缩放比例呢？

其实也很简单：

• 当屏幕宽高比 < 设计稿宽高比，我们需要缩放的比例是屏幕宽度 / 设计稿宽度
• 当屏幕宽高比 > 设计稿宽高比，我们需要缩放的比例是屏幕高度 / 设计稿高度

六、有哪些图表开源库推荐？

• D3.js

D3.js是一个强大的数据可视化库，它可以帮助你创建各种各样的交互式数据可视化图表，包括折线图、柱状图、饼图、散点图等。

• ECharts

ECharts是百度开源的一个数据可视化库，它支持多种图表类型，具有丰富的交互功能和动画效果。

• Highcharts

Highcharts是一个功能强大的图表库，提供了多种图表类型和可定制的选项。

• Chart.js

Chart.js是一个轻量级的图表库，适用于创建简单的静态图表。

• Three.js

如果你需要在数字大屏上展示3D内容，Three.js是一个用于创建3D图形的优秀库。

• AntV G2/G6

AntV是蚂蚁金服开源的数据可视化解决方案，其中的G2和G6库可以用于创建各种图表，支持丰富的交互和动画效果。

最后

最后，给我们的辅导服务打个广告。