近期分别使用了 React 和 Vue 完成了兩個大屏可視化案例，經曆了設計師和産品經理的各種 “指指點點” ，也算是對可視化大屏項目有了一點點小的經驗，對于兩個技術棧寫元件也有一點小心得，趁着周末總結一下。大屏效果圖1
兩個大屏可視化案例的布局與實作 大屏效果圖2
兩個大屏可視化案例的布局與實作 可視化大屏
無論是在科幻電影還是在真實世界裡，可視化大屏都是非常常見的一種表現手法。之前在昆明警察局出差，也親眼看到了 湄公河慘案 的真實指揮中心和他的大屏，螢幕的寬度大約有兩層樓高。可視化大屏的特性
可視化大屏， 歸根到底還是運用的可視化技術 ，隻不過展現的螢幕比起筆記本和顯示器大了很多。相比于傳統的桌面級可視化運用，大屏可視化的特性有:
- 螢幕巨大，使用者通常離螢幕比較遠，文字表達出來的資訊需要足夠清楚，通常要在字型和顔色上做文章。
- 弱化互動，基于鍵盤和滑鼠的互動方式很少，更多時候系統自己做出響應，而不是讓人工介入。
- 視覺沖擊力強，設計一般都是以深色為底色，一來科技感十足，二來可以配合突出的主體動畫和強設計感的元素。
- 場景化，一塊大屏通常用來展示一類場景，場景主要由圖表構成，背景管理系統那套表單通常不會出現在大屏。
- 動畫更重要了，用動畫表現出來的資料，通常是大屏項目中 最迷人 的地方。說動畫是大屏項目的 靈魂 也不為過。案例一的那條紅線被設計師稱為 “畫龍點睛”之筆 。
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個：
- vw : 1vw 等于視口寬度的1%
- vh : 1vh 等于視口高度的1%
- vmin : 選取 vw 和 vh 中最小的那個
- vmax : 選取 vw 和 vh 中最大的那個
視口機關差別于%機關，視口機關是依賴于視口的尺寸，根據視口尺寸的百分比來定義的；而%機關則是依賴于元素的祖先元素。
用視口機關度量，視口寬度為100vw，高度為100vh，相當于将寬高分别分成了100份。
利用視口機關适配頁面
利用視口機關适配頁面通常有兩種方法，做法一僅使用vw作為CSS機關，使用Sass函數編譯。做法二搭配vw和rem，布局更優化。做法二是更為優秀的做法，我們也采用了這種方法，兩點原因：
- 使用者視覺體驗更好，增加了最大最小寬度的限制；
- 如果選擇主流的rem彈性布局方式作為項目開發的适配頁面方法，那麼做法二更适合于後期項目從 rem 機關過渡到 vw 機關。
結束語
由于是公司的項目，不同于我個人的項目可以開源，本文更多的講的是 道 上的東西，術上的東西并沒有過多涉及，甚至沒有一行樣例代碼。兩個大屏可視化案例的布局與實作 真實的效果圖
最後還是希望本文能給大家帶來一些啟發和收獲。