數無形時少直覺，形無數時難入微。——華羅庚
我們都嘗試去觀察生活，但是有時卻缺少了總結生活；有時我們太著眼細節，忽略了大局。資料和視覺化似乎是兩個好兄弟，就像仰望星空與腳踏實地的兩種狀態。
視覺化開發的知識框架
視覺化目的
資料來源
- 客戶系統長期積累的資料；
- 客戶系統裝置實時產生資料；
- 從外界匯入資料；
- 為專案演示準備的相關資料
資料是視覺化的第一步，這裡和大家提一提資料處理。
使用者使用軟體，瀏覽網頁、APP會不間斷產生各種資料。如果我們任由資料增長而不使用，那就是暴殄天物，但就算我們有了使用資料的意識，卻也不一定能發揮資料的價值，所以將資料進行分析是使資料發揮價值的第一步。 複雜的業務帶來的後果是不同產品間使用者資料相互隔離，我們稱之為”資料孤島“，讓資料用起來的第一步便是將該孤島連線，將凌亂資料歸類為資料資產，這裡面臨的問題就是資料的來源太多，我們必須針對多種資料來源做適配處理，離線將資料通過預設演算法寶進行處理，建立標籤系統，根據業務不同緯度生成處理資料，最終通過視覺化手段、標籤體系、已訓練模型，支撐業務。同時業務又反過來提供源源不斷的資料，形成閉環。
我們能夠感知到，視覺化是資料處理的應用上層。至於對於資料的處理，其實底層是很複雜的，從__資料採集__到__資料儲存__到__資料加工__變為資料資產，進而使用資料資產擴充上層應用，視覺化是其中一種。
目的
- 視覺化使資料更直觀，讓使用者更易感知
- 通過大屏內容，輔助使用者進行商業決策
對於不同使用者的價值
- 使用人員：操作性更強、互動性更好
- 視察領導：更實用、更可靠
- 參觀人員：更美觀、更具趣味性
設計哲學
字型
一般優先選用系統內建字型，當然如果有定製字型則可選用定製字型，資料資訊相關字號一般14px以上，這樣大屏觀看時，更清晰。
| 解析度 | html font-size |
|---|---|
| 1366*768 | 12px |
| 1920*1080(1080p) | 16px |
| 2560*1440(2k) | 22px |
| 3840*2160(4k) |
配色
- 較深色調：淺色投屏對視覺刺激較強，不利於長時間觀看，並且深色調更具科技感，更有審美價值；深色調更緊湊，聚焦視覺焦點，結合暗色調更柔和舒服不刺眼；
- 設計一致性：模組間設計保持風格色彩一致，若遇需凸顯的內容，可提高對比度或延展色系；
- 背景：背景可適當使用漸變、星空、條紋、漸變線、點綴等效果
佈局方法
- 整體感：儘可能元件等高同列，不要讓元件顯得突兀或獨立。相關資料合理組織，視覺上呈現一體化；
- 元件間距與關係：分清元件資訊主次，儘可能將表現形式、表達目的、資料性質接近的元件佈局在一起，使使用者更好獲取資料資訊；
- 主次分明：通常中間區域、大片區域放置主要資訊，次要資訊可環繞放置
基於以上考慮，我們可以設計一種基於網格形式大屏開發方案。
動畫與互動
適當動畫可提升大屏趣味性，但一定要注意主次。更具實際需要確定互動方式。
圖表的選擇
技術實現
大屏需求大多數可藉助封裝的元件庫、工具庫較快完成，部分需求需要使用偏底層技術實現，一般用到的技術點如下：
- CSS3
- SVG
- Canvas
- WebGL
我們也可以使用半成品進行定製，SVG相關：SVG.js、snap，Canvas 2D有：zrender、ocanvas、EaselJS 等。
GIS相關
基礎
地相簿元件
地圖開放平臺
空間資料庫
地理視覺化
工具庫
| 圖表庫 | 繪相簿 | 動畫庫 |
|---|---|---|
| ECharts | three | anime |
| HightCharts | D3 | mo |
| Chart | SVG | Popmotion |
| Chartist | Snap | Bounce |
| AntV系列 | Raphaël | Tween(補間動畫) |
部署方式
| 部署方式 | 特點 | 優勢 | 劣勢 |
|---|---|---|---|
| 私有部署 | 專案完全部署在客戶伺服器上 | 資料更安全、架構易調整 | 擴容不易、初建成本高 |
| 雲部署 | 專案完全部署在雲端 | 使用靈活、按需付費 | 資料有風險 |
| 混合部署 | 重要內容在客戶伺服器，部分在雲端 | 使用更為靈活 | 提高程式複雜 |
網路環境
- 無網路連線：所有資源與資料存放在本地，資料更新依賴人工匯入；
- 僅訪問內網：資源與資料多數儲存在本地，可從內網內其他伺服器獲取資料；
- 可訪問網際網路：不敏感資源可存放在 CDN 或雲伺服器，減少本地專案體積與維護成本。
裝置引數
- 螢幕顯示技術: LED、LCD、OLED、AMOLED（不同顯示技術大屏顯示效果有差異，但影響不大）
- 螢幕解析度：見解析度適配
- 螢幕寬高比例：4:3、16:9(常見)、15:9、16:10、21:9（注意對可能使用的異型屏的適配）
- 客戶端硬體效能: 記憶體、CPU、GPU、顯示卡（複雜的大屏對客戶端配置要求較高，地圖的大資料體量比較吃 CPU和記憶體，webgl 會呼叫GPU渲染，一般不是 webgl 的，動畫多的大屏，容易吃 CPU，顯示卡也很重要，但不易量化）
- 客戶端瀏覽器: 建議選用較新版本的 Chrome 或 FireFox 等現代瀏覽器