你必須掌握的可視化大屏開發模式

數無形時少直覺，形無數時難入微。——華羅庚

咱們都嘗試去觀察生活，可是有時卻缺乏了總結生活；有時咱們太着眼細節，忽略了大局。數據和可視化彷佛是兩個好兄弟，就像仰望星空與腳踏實地的兩種狀態。

可視化開發的知識框架

可視化目的

數據來源

1. 客戶系統長期積累的數據；
2. 客戶系統設備實時產生數據；
3. 從外界導入數據；
4. 爲項目演示準備的相關數據

數據是可視化的第一步，這裏和你們提一提數據處理。

用戶使用軟件，瀏覽網頁、APP會不間斷產生各類數據。若是咱們任由數據增加而不使用，那就是暴殄天物，但就算咱們有了使用數據的意識，卻也不必定能發揮數據的價值，因此將數據進行分析是使數據發揮價值的第一步。 複雜的業務帶來的後果是不一樣產品間用戶數據相互隔離，咱們稱之爲」數據孤島「，讓數據用起來的第一步即是將該孤島鏈接，將凌亂數據歸類爲數據資產，這裏面臨的問題就是數據的來源太多，咱們必須針對多種數據源作適配處理，離線將數據經過預設算法寶進行處理，創建標籤系統，根據業務不一樣緯度生成處理數據，最終經過可視化手段、標籤體系、已訓練模型，支撐業務。同時業務又反過來提供源源不斷的數據，造成閉環。

咱們可以感知到，可視化是數據處理的應用上層。至於對於數據的處理，其實底層是很複雜的，從__數據採集__到__數據存儲__到__數據加工__變爲數據資產，進而使用數據資產拓展上層應用，可視化是其中一種。

目的

1. 可視化使數據更直觀，讓用戶更易感知
2. 經過大屏內容，輔助用戶進行商業決策

對於不一樣用戶的價值

1. 使用人員：操做性更強、交互性更好
2. 視察領導：更實用、更可靠
3. 參觀人員：更美觀、更具趣味性

設計哲學

字體

通常優先選用系統內置字體，固然若是有定製字體則可選用定製字體，數據信息相關字號通常14px以上，這樣大屏觀看時，更清晰。

分辨率	html font-size
1366*768	12px
1920*1080(1080p)	16px
2560*1440(2k)	22px
3840*2160(4k)

配色

1. 較深色調：淺色投屏對視覺刺激較強，不利於長時間觀看，而且深色調更具科技感，更有審美價值；深色調更緊湊，聚焦視覺焦點，結合暗色調更柔和舒服不刺眼；
2. 設計一致性：模塊間設計保持風格色彩一致，若遇需凸顯的內容，可提升對比度或延展色系；
3. 背景：背景可適當使用漸變、星空、條紋、漸變線、點綴等效果

佈局方法

1. 總體感：儘量組件等高同列，不要讓組件顯得突兀或獨立。相關數據合理組織，視覺上呈現一體化；
2. 組件間距與關係：分清組件信息主次，儘量將表現形式、表達目的、數據性質接近的組件佈局在一塊兒，使用戶更好獲取數據信息；
3. 主次分明：一般中間區域、大片區域放置主要信息，次要信息可環繞放置

基於以上考慮，咱們能夠設計一種基於網格形式大屏開發方案。

動畫與交互

適當動畫可提高大屏趣味性，但必定要注意主次。更具實際須要肯定交互方式。

圖表的選擇

技術實現

大屏需求大多數可藉助封裝的組件庫、工具庫較快完成，部分需求須要使用偏底層技術實現，通常用到的技術點以下：

1. CSS3
2. SVG
3. Canvas
4. WebGL

咱們也可使用半成品進行定製，SVG相關：SVG.js、snap，Canvas 2D有：zrender、ocanvas、EaselJS 等。

GIS相關

基礎

• 地圖
• 珊格瓦片/矢量瓦片
• 投影與座標系
• GeoJSON

地圖庫組件

• OpenLayers
• Leaflet
• Sinomap
• mapbox
• ArcGIS For JavaScript
• QGIS

地圖開放平臺

• 高德地圖
• 百度地圖
• 騰訊地圖
• 天地圖
• 谷歌地圖

空間數據庫

• PostGIS
• PostgreSQL
• Oracle Spatial

地理可視化

• supercluster
• turf
• geojs
• cesiumjs
• geohey

工具庫

圖表庫	繪圖庫	動畫庫
ECharts	three	anime
HightCharts	D3	mo
Chart	SVG	Popmotion
Chartist	Snap	Bounce
AntV系列	Raphaël	Tween(補間動畫)

部署方式

部署方式	特色	優點	劣勢
私有部署	項目徹底部署在客戶服務器上	數據更安全、架構易調整	擴容不易、初建成本高
雲部署	項目徹底部署在雲端	使用靈活、按需付費	數據有風險
混合部署	重要內容在客戶服務器，部分在雲端	使用更爲靈活	提升程序複雜

網絡環境

• 無網絡鏈接：全部資源與數據存放在本地，數據更新依賴人工導入；
• 僅訪問內網：資源與數據多數存儲在本地，可從內網內其餘服務器獲取數據；
• 可訪問互聯網：不敏感資源可存放在 CDN 或雲服務器，減小本地項目體積與維護成本。

設備參數

• 屏幕顯示技術: LED、LCD、OLED、AMOLED（不一樣顯示技術大屏顯示效果有差別，但影響不大）
• 屏幕分辨率：見分辨率適配
• 屏幕寬高比例：4:三、16:9(常見)、15:九、16:十、21:9（注意對可能使用的異型屏的適配）
• 客戶端硬件性能: 內存、CPU、GPU、顯卡（複雜的大屏對客戶端配置要求較高，地圖的大數據體量比較吃 CPU和內存，webgl 會調用GPU渲染，通常不是 webgl 的，動畫多的大屏，容易吃 CPU，顯卡也很重要，但不易量化）
• 客戶端瀏覽器: 建議選用較新版本的 Chrome 或 FireFox 等現代瀏覽器