近期分別使用了 react 和 vue 完成了兩個大屏視覺化案例，經歷了設計師和產品經理的各種 「指指點點」 ，也算是對視覺化大屏專案有了一點點小的經驗，對於兩個技術棧寫元件也有一點小心得，趁著週末總結一下。大屏效果圖1
大屏效果圖2
無論是在科幻電影還是在真實世界裡，視覺化大屏都是非常常見的一種表現手法。之前在昆明公安局出差，也親眼看到了 湄公河** 的真實指揮中心和他的大屏，螢幕的寬度大約有兩層樓高。
視覺化大屏， 歸根到底還是運用的視覺化技術 ，只不過展現的螢幕比起筆記本和顯示器大了很多。相比於傳統的桌面級視覺化運用，大屏視覺化的特性有:
螢幕巨大，使用者通常離螢幕比較遠，文字表達出來的資訊需要足夠清楚，通常要在字型和顏色上做文章。
弱化互動，基於鍵盤和滑鼠的互動方式很少，更多時候系統自己做出響應，而不是讓人工介入。
視覺衝擊力強，設計一般都是以深色為底色，一來科技感十足，二來可以配合突出的主體動畫和強設計感的元素。
場景化，一塊大屏通常用來展示一類場景，場景主要由圖表構成，後台管理系統那套表單通常不會出現在大屏。
動畫更重要了，用動畫表現出來的資料，通常是大屏專案中 最迷人 的地方。說動畫是大屏專案的 靈魂 也不為過。案例一的那條紅線被設計師稱為 「畫龍點睛」之筆 。
不作為乙個整體看大屏專案，其實還是乙個個小的元件。在實現兩個專案的過程中，由於上海和南京兩地團隊的 技術棧差異 ，使用了vue和react兩種框架。於是我只能看了一晚上vue之後就上手去寫vue的元件。兩個大屏案例之間有共同的元件，不需要整個重寫，只需要改寫即可；改寫的過程中，我也比較深刻體會到了兩者的不同。
由於寬高的不確定性，做元件的第一步是 獲取元件在大屏上的寬高 。
寬高確定了，元件內部的元素和字型大小要進行相應比例的放縮，達到自適應的效果。在我的案例裡使用的是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 單位。
由於是公司的專案，不同於我個人的專案可以開源，本文更多的講的是 道 上的東西，術上的東西並沒有過多涉及，甚至沒有一行樣例**。
真實的效果圖
視覺化大屏製作過程 資料視覺化大屏製作的注意事項？
大資料視覺化是以大屏為主要載體的資料視覺化展現。大屏資料視覺化最大的特點就在於讓使用者最直觀地感受複雜的資料，並且通過各種影象 圖形來有效地表達出想要的效果。大屏資料視覺化是以大資料的發展為前提的，而資料視覺化技術又反過來作用於大資料的發展。在一些大型企業中，大多數企業都會選擇大螢幕資料視覺化作為宣...
分享5個經典的資料視覺化大屏應用案例
近幾年，隨著大資料產業的蓬勃發展，資料視覺化大屏在各行各業中的應用越來越廣泛，教育 醫療 政務 交通運輸 能源等等，到處都能看到資料視覺化大屏的身影。大面積 炫酷動效 豐富色彩是視覺化大屏最為顯著的特點，大屏易在觀感上給人留下震撼印象，便於營造某些獨特氛圍 打造儀式感。大屏資料視覺化目前主要有資訊展...
python 模擬擲骰子，兩個篩子資料視覺化
功能 模擬擲骰子，兩個篩子資料視覺化 版本 3.0 日期 19 3 24 import random import matplotlib.pyplot as plt defroll num roll random.randint 1,6 return roll defmain 主函式 total t...