Layout and implementation of two large-screen visualization Case

Recently, respectively, using React Vue and completed two large-screen visualization cases, experienced designers and product managers of the various "pointing", it can be considered with a little bit of experience on the small screen visualization of large projects, for two write technology stack components also have a little experience, taking advantage of the weekend to sum up.

Big-screen effect 1

Big-screen effect 2

Visualization big screen

Whether in science fiction movies or in the real world, large-screen visualization is a very common expression. Kunming Public Security Bureau before the trip, also witnessed the  Mekong massacre  true command center and his big screen, the width of the screen about two stories high.

Characteristics of large-screen visualization

Visualization big screen,  in the final analysis is the use of visualization technology  , but to show the screen display than laptops and much larger. Compared to the traditional desktop visualization of use, large-screen visualization features are:

1. Huge screen, users often relatively far away from the screen, the information needs expressed in words clear enough, usually to make an issue of fonts and colors.
2. Weakening the interaction, based on the interaction of the keyboard and mouse little more time to respond to the system itself, rather than manual intervention.
3. Strong visual impact, design is generally a dark background, a sense of science and technology to the full, and secondly to highlight the main elements with animation and strong design sense.
4. Scene of, a large screen is usually used to display a class scene, the scene is mainly composed of the chart, back office management system set of forms often do not appear in the big screen.
5. More importantly, the animation, animation demonstrated by the data, usually a big-screen project is the most fascinating place. He said the big-screen animation is the soul of the project is not excessive. Case one piece of the red line is the designer known as the "finishing touch" of the pen.

React achieve Vue and visual components

As a whole does not see the big-screen project, but it is still a small component. During the implementation of the two projects, due to differences in Shanghai and Nanjing stack two teams of technology, using Vue and React two frameworks. So I can only read to get started after a night Vue Vue assembly to write a. There are common components between the two big-screen stories, do not need to rewrite the whole, only you need to be rewritten; the process of rewriting, I also more deeply understand the difference.

由于宽高的不确定性，做组件的第一步是 获取组件在大屏上的宽高 。

• React获取宽高的方式 
  React获取宽高的方式比较标准，分为三步:在render的时候ref，在did的时候取值，在构造方法create。在生命周期函数的钩子里实现相应方法即可。
• Vue获取宽高的方式 
  Vue似乎 更自由 一些，直接在mouted钩子里就可以拿到相应组件的clientWidth。

宽高确定了，组件内部的元素和字体大小要进行相应比例的放缩，达到自适应的效果。在我的案例里使用的是d3和bizchart来完成图的绘制，d3中我大量使用了linearScale进行插值计算，而bizChart就更为简单，框架帮你完成了自适应。

动画部分通常会涉及一些元素的增加，有增加就不能缺少释放，这是内存管理的一个铁律。在完成第一个大屏的过程中，为了完成粒子放射的效果，我增加了很多粒子，起先没有将他们释放掉，只是从视觉上藏了起来，这造成了系统一段时间后会很卡。

在做组件的过程中，还需注意组件内部的样式 不能影响外部 。由于粗心，我就出现了这样的一个小错误，楠哥说如果在其他公司是要扣KPI的。

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

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

视口单位

视口

在业界，极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 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份。

利用视口单位适配页面

利用视口单位适配页面通常有两种方法，做法一仅使用vw作为CSS单位，使用Sass函数编译。做法二搭配vw和rem，布局更优化。做法二是更为优秀的做法，我们也采用了这种方法，两点原因：

1. 用户视觉体验更好，增加了最大最小宽度的限制；
2. 如果选择主流的rem弹性布局方式作为项目开发的适配页面方法，那么做法二更适合于后期项目从 rem 单位过渡到 vw 单位。

结束语

由于是公司的项目，不同于我个人的项目可以开源，本文更多的讲的是 道 上的东西，术上的东西并没有过多涉及，甚至没有一行样例代码。

真实的效果图

最后还是希望本文能给大家带来一些启发和收获。