兩個大屏可視化案例的布局與實現

近期分別使用了 React 和 Vue 完成了兩個大屏可視化案例，經歷了設計師和產品經理的各種 “指指點點” ，也算是對可視化大屏項目有了一點點小的經驗，對於兩個技術棧寫組件也有一點小心得，趁着周末總結一下。

大屏效果圖1

大屏效果圖2

可視化大屏

無論是在科幻電影還是在真實世界里，可視化大屏都是非常常見的一種表現手法。之前在昆明公安局出差，也親眼看到了 湄公河慘案 的真實指揮中心和他的大屏，屏幕的寬度大約有兩層樓高。

可視化大屏的特性

可視化大屏， 歸根到底還是運用的可視化技術 ，只不過展現的屏幕比起筆記本和顯示器大了很多。相比於傳統的桌面級可視化運用，大屏可視化的特性有:

1. 屏幕巨大，用戶通常離屏幕比較遠，文字表達出來的信息需要足夠清楚，通常要在字體和顏色上做文章。
2. 弱化交互，基於鍵盤和鼠標的交互方式很少，更多時候系統自己做出響應，而不是讓人工介入。
3. 視覺沖擊力強，設計一般都是以深色為底色，一來科技感十足，二來可以配合突出的主體動畫和強設計感的元素。
4. 場景化，一塊大屏通常用來展示一類場景，場景主要由圖表構成，后台管理系統那套表單通常不會出現在大屏。
5. 動畫更重要了，用動畫表現出來的數據，通常是大屏項目中 最迷人 的地方。說動畫是大屏項目的 靈魂 也不為過。案例一的那條紅線被設計師稱為 “畫龍點睛”之筆 。

Vue和React可視化組件的實現

不作為一個整體看大屏項目，其實還是一個個小的組件。在實現兩個項目的過程中，由於上海和南京兩地團隊的 技術棧差異 ，使用了Vue和React兩種框架。於是我只能看了一晚上Vue之后就上手去寫Vue的組件。兩個大屏案例之間有共同的組件，不需要整個重寫，只需要改寫即可；改寫的過程中，我也比較深刻體會到了兩者的不同。

由於寬高的不確定性，做組件的第一步是 獲取組件在大屏上的寬高 。

• 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 單位。

結束語

由於是公司的項目，不同於我個人的項目可以開源，本文更多的講的是 道 上的東西，術上的東西並沒有過多涉及，甚至沒有一行樣例代碼。

真實的效果圖

最后還是希望本文能給大家帶來一些啟發和收獲。