大家好，今天的文章由团队的 Range 老师分享。
随着前端技术不断攻城略地，越来越多的终端采用web技术来实现，作为 “大”前端的一员，越来越多小伙伴遇到了 大屏开发 这种场景。
今天，我们就来看看在大屏开发中，怎样换一种思路，来处理不同大屏的布局问题。
前言
授人以渔，不如授人以鱼。
本文将简单介绍数字大屏，以及常见问题的解决方法。
一、设计大屏的原则
大屏的展示都是基于业务的需求，不是简单的排数据，展示数据。所有的大屏都是基于业务这一基础上展示。
了解相关人员的业务需求是根本。例如：
- 对于设备而言相关人员想知道设备的运转是否正常、设备损耗多少、设备何时要修理、设备是否故障等；
- 对于事故而言相关人员想知道事故发生了多少、哪里发生事故、事故有没有减少、事故损失多少等等
- ……
知道了业务需求，我们才能帮助相关人员真正意义上的解决问题。才能更好的确定知道，知道数据要如何展示。
二、怎么选择常见图表？
提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等，没有把握数据的关联性经常会导致图表的误用。
图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 。
因此我们从数据出发，从功能角度对图表进行分类。找出指标里的数据主要集中在什么范围、有啥关联性、两者之间有啥差异、表现出怎样的规律等。
具体的选择，我们可以参考下图：
三、推荐购买还是自研？
主要考虑的因素：
- 工期
一般来说，自研的开发效率肯定慢，购买的大屏，直接套模板，可能更快。
- 成本
购买的大屏，公司之前购买的，是一年n万块钱，m个大屏。超过限定的数量，还得额外交钱。所以成本和大屏个数相关。
自己研发的话，那就是开发人员的成本了。
- 效率
购买的话，拖拖拽拽估计至少1-2天一个吧。完全可以脱离开发人员进行。
如果是自己开发，本人自己评估，框架搭建完以后，2天一个大屏的速度，如果大屏的数据需要调试接口，那么还会增加时间。
- 效果
购买的屏幕，更丰富，很多图标在开源框架找不到的。如果不在乎钱，那么推荐直接购买算了。
自己开发的效果肯定要打折一些。
- 适应性
如果设计稿玩的花样多，那么还是自研可靠点。
购买的大屏，样式偏向于固定。
四、有哪些常见的布局？
-
中心环绕
-
左右分布
-
上下分布
大家可以想想，这些布局怎么实现呢？
五、如何适配不同屏幕大小？
适配不同尺寸的屏幕是数字大屏项目中至关重要的任务，以确保在各种设备上都能提供良好的用户体验。
以下是一些步骤和技巧：
- 使用响应式设计
相信大家对于响应式设计都有一定的了解，一般通过使用 CSS媒体查询（media）和 弹性布局来适应不同屏幕尺寸。
我们可以通过媒体查询设置断点，在不同屏幕宽度上切换布局和样式。比如给不同的断点分别设置字体大小、元素位置、内边距、边框等，以适应不同的屏幕尺寸。
弹性布局（Flexbox和Grid）相信大家也很了解，让元素相对于父元素进行弹性调整，适应不同的屏幕宽度。
- 使用视口单位，限制使用绝对尺寸
视口单位（如vw、vh、vmin、vmax）允许你以相对于视口尺寸的方式设置元素的尺寸，这可以让你的内容能够根据屏幕尺寸自适应。
同时，应该尽量避免使用固定像素值来定义尺寸
- 优化交互元素
对于交互元素（如按钮、链接等），确保它们在不同尺寸的屏幕上有足够的点击区域。这有助于避免用户在小屏幕上难以点击的问题。
- 适当的内容截断
在小屏幕上，可能需要考虑对内容进行截断，以避免信息过于拥挤。可以使用省略号或折叠等方式来管理内容长度。
- 计算屏幕缩放比(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库可以用于创建各种图表，支持丰富的交互和动画效果。
