tags: [组件]
categories: 业务场景解决方案

无论是在科幻电影还是在真实世界里，可视化大屏都是非常常见的一种表现手法。
之前在市局看到了大屏是由多个屏幕组成，看起来有两层楼那么高。

技术栈：echarts + css3 + vw + vh + rem
因为运用了大量css3 新特性，所以建议使用 google浏览器，投大屏。

可视化大屏的特性

可视化大屏，归根到底还是运用的可视化技术，只不过展现的屏幕比起笔记本和显示器大了很多。相比于传统的桌面级可视化运用，大屏可视化的特性有:

  1. 屏幕巨大，用户通常离屏幕比较远，文字表达出来的信息需要足够清楚，通常要在字体和颜色上做文章。

  2. 弱化交互，基于键盘和鼠标的交互方式很少，更多时候系统自己做出响应，而不是让人工介入。

  3. 视觉冲击力强，设计一般都是以深色为底色，一来科技感十足，二来可以配合突出的主体动画和强设计感的元素。

  4. 场景化，一块大屏通常用来展示一类场景，场景主要由图表构成，后台管理系统那套表单通常不会出现在大屏。

  5. 动画更重要了，用动画表现出来的数据，通常是大屏项目中最迷人的地方。说动画是大屏项目的灵魂也不为过。

大屏的自动布局和宽高自适应

可视化大屏的布局部分也是一个重要的部分。
在我们的项目中，准备使用纯css3的vw、vh实现自适应。

视口

在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。

  • 桌面端：视口的宽度和浏览器窗口的宽度一致

  • 移动端 ：视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)

  • 可视化大屏属于桌面

视口单位

根据CSS3规范，视口单位主要包括4个：

  1. vw : 1vw 等于视口宽度的1%

  2. vh : 1vh 等于视口高度的1%

  3. vmin : 选取 vw 和 vh 中最小的那个

  4. vmax : 选取 vw 和 vh 中最大的那个视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。用视口单位度量，视口宽度为100vw，高度为100vh，相当于将宽高分别分成了100份。利用视口单位适配页面

  5. vw、vh是基于视口的布局方案

  6. rem布局-解决字体适配（rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。）

  7. 使用vw+vh+rem的布局之外，可以再加上elementUI的栅格布局，可以满足需求。

协作

  • 选择一种尺寸作为设计和开发基准

  • 定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的)

  • 特殊适配效果给出设计效果

大屏业务场景解决方案 - 图1

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 19201080、1366768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440900，按照栅格系统原则向上或向下适配。展示型页面以 1440900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

参考资源

终端设备参数)