1 需求背景分析
數據可視化要根據數據的特性，可視化要根據數據的特性，如時間信息和空間信息等，找到合適的可視化方式，例如圖表(Chart)、圖(Diagram)和地圖(Map)等，將數據直觀地展現出來，以幫助人們理解數據，同時找出包含在海量數據中的規律或者信息。數據可視化是大數據生命周期管理的最后一步，也是最重要的一步。
數據可視化起源于圖形學、計算機圖形學、人工智能、科學可視化以及用戶界面等領域的相互促進和發展，是當前計算機科學的一個重要研究方向，它利用計算機對抽象信息進行直觀的表示，以利于快速檢索信息和增強認知能力。 數據可視化系統并不是為了展示用戶的已知的數據之間的規律，而是為了幫助用戶通過認知數據，有新的發現，發現這些數據所反映的實質。
大數據時代，大規模、高緯度、非結構化數據層出不窮，要將這樣的數據以可視化形式完美的展示出來, 傳統的顯示技術已很難滿足這樣的需求。而高分高清大屏幕拼接可視化技術，也就是大屏技術正是為解決這一問題而發展起來的, 它具有超大畫面、純真彩色、高亮度、高分辨率等顯示優勢, 結合數據實時渲染技術、GIS空間數據可視化技術，實現數據實時圖形可視化、場景化以及實時交互，讓使用者更加方便地進行數據的理解和空間知識的呈現，可應用于指揮監控、視景仿真及三維交互等眾多領域。
2 框架介紹與對比分析
目前業界用的比較多的兩款開源圖表框架是 ECharts與 Highcharts。下面分別對其進行介紹。
2.1 Echarts
ECharts，是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
ZRender 是二維繪圖引擎，它提供 Canvas、SVG、VML 等多種渲染方式。
特性如下：
- 豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，此外還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
- 多種數據格式無需轉換直接使用
ECharts 內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數據源，通過簡單的設置 encode 屬性就可以完成從數據到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數據轉換的步驟，而且多個組件能夠共享一份數據而不用克隆。 為了配合大數據量的展現，ECharts 還支持輸入 TypedArray 格式的數據，TypedArray 在大數據量的存儲中可以占用更少的內存，對 GC 友好等特性也可以大幅度提升可視化應用的性能。
TypedArray是一種通用的固定長度緩沖區類型，允許讀取緩沖區中的二進制數據。
- 千萬數據的前端展現
通過增量渲染技術（4.0+），配合各種細致的優化，ECharts 能夠展現千萬級的數據量，并且在這個數據量級依然能夠進行流暢的縮放平移等交互。
- 移動端優化
ECharts 針對移動端交互做了細致的優化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移等。
- 多渲染方案
ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內存擔憂，Canvas 可以輕松應對大數據量和特效的展現。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現。
- 支持多維數據
除了加入了平行坐標等常見的多維數據可視化工具外，對于傳統的散點圖等，傳入的數據也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠將不同維度的數據映射到顏色、大小、透明度、明暗度等不同的視覺通道。
- 動態數據
ECharts 由數據驅動，數據的改變驅動圖表展現的改變。因此動態數據的實現也變得異常簡單，只需要獲取數據，填入數據，ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。
- 絢麗的特效
ECharts 針對線數據，點數據等地理數據的可視化提供了吸引眼球的特效。
- 三維可視化
ECharts 提供了基于 WebGL 的 ECharts GL，我們可以跟使用 ECharts 普通組件一樣輕松的使用 ECharts GL 繪制出三維的地球，建筑群，人口分布的柱狀圖。
2.2 Highcharts
Highcharts是使用純 JavaScript 實現的交互性圖表框架，號稱在全球百強企業中，有72家企業（比如 facebook、twitter、華為、京東、阿里云等）使用了這套框架。
Highcharts 還包含一款名為Highmaps 的HTML5 地圖組件，支持下鉆，觸摸、手勢操作，利用它可以方便快捷地創建用于展示銷售、選舉結果等其他與地理位置關系密切的交互地圖圖表。Highmaps 可以單獨使用也可以作為 Highcharts 的一個組件來使用。
Highcharts 包含以下特性：
- 豐富的可視化類型
Highcharts 支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中很多圖表可以集成在同一個圖形中形成混合圖。Highstock 則提供股票走勢圖（K線、分時）、高級時間軸圖，Highmaps 提供各種豐富多樣的地圖。
- 兼容性
Highcharts 可以在所有的移動設備及電腦上的瀏覽器中使用，包括 iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系統中 Highcharts 支持多點觸摸功能，因而可以提供極致的用戶體驗。在現代的瀏覽器中使用 SVG 技術進行圖形繪制，在低版本 IE 則使用 VML 進行圖形繪制。
- 非商業使用免費
在個人網站、學校網站及非盈利機構中可以直接使用 Highcharts。
商業用途的項目、政府項目（項目包括網站、內部應用或其他項目）都需要購買授權。https://highcharts.com.cn/highcharts
- 開源
Highcharts 最重要的特點之一就是：無論免費版還是付費版，都可以下載源碼并可以對其進行編輯。
- 純 JavaScript
Highcharts 完全基于 HTML5 技術，只需要兩個 JS 文件即可運行。
- 簡單的配置語法
在 Highcharts 中設置配置選項不需要任何高級的編程技術，所有的配置都是 JSON 對象，只包含用冒號連接的鍵值對、用逗號進行分割、用括號進行對象包裹。JSON 具有易于人閱讀和編寫，同時也易于機器解析和生成的特點。
- 動態交互性
Highcharts 支持豐富交互性，在圖表創建完畢后，可以用豐富的 API 進行添加、移除或修改數據列、數據點、坐標軸等操作。 結合 jQuery 的 ajax 功能，可以做到實時刷新數據、用戶手動修改數據等功能，結合事件處理，可以做到各種交互功能。
- 支持多坐標軸
多個數據進行對比這是非常常見的需求，Highcharts 可以讓我們為每個類型的數據添加坐標軸，每個軸可以定義放置的位置，所有的設置都可以獨立生效，包括旋轉、樣式設計和定位，當然也支持多個數據共用一個坐標軸。
- 數據提示框
當鼠標劃過圖形時，Highcharts 可以將數據點或數據列的信息展示在提示框中，并且提示框會跟隨用戶的鼠標；而且可以智能的顯示離鼠標最近的點或被遮蓋點的信息。
- 時間軸
75% 的直角坐標系（包含 X軸 和 Y軸）圖表中是時間軸圖表，因為 Highcharts 對時間軸的處理非常智能。Highcharts 以毫秒為單位，可以精確的計算出月、周、日、小時、分鐘等時間刻度的位置。
- 導出和打印
Highcharts 支持導出功能，用戶可以一鍵導出 PNG、JPEG、PDF 或 SVG 文件，通過插件可以實現導出為 Excel 文件功能；另外，用戶還可以從網頁上直接打印圖表。
- 縮放和鉆取
通過縮放可以方便的查看不同范圍的數據；通過鉆取可以方便的查看不同級別的詳細數據。
- 方便加載外部數據
Highcharts 的數據是 JavaScript 數組或對象，這些數據可以是本地的配置對象，獨立的數據文件（JSON、CVS）甚至是不同的網站上定義。另外，這些數據可以用任何形式處理好并加載到 Highcharts 中。
- 儀表圖
儀表圖對于 Dashboard 來說特別理想，這種圖表就像速度計一樣，一眼就可以輕松閱讀。
- 極地圖
折線圖、面積圖、柱形圖等圖形可以通過一個簡單的配置轉換成極地圖、雷達圖。
- 圖表或坐標軸反轉
Highcharts 支持圖表反轉（X 軸或 Y軸對調），這樣 X軸是垂直的，方便進行數據對比；坐標軸旋轉則可以坐標軸的最大值和最小值顯示對調。
- 文本旋轉
圖表中所有的文本，包括坐標軸標簽、數據標簽等都可以進行任意角度旋轉。
2.3 橫向比較
2.3.1 特性比較
| 特性 | Echarts | Highcharts |
|---|---|---|
| 可視化類型數 | 折線圖、柱狀圖、散點圖、餅圖、K線圖、盒形圖、地圖、熱力圖、線圖、關系圖、漏斗圖，儀表盤等。除此之外，還支持幾種特色類型圖，比如樹圖、路徑圖、旭日圖、桑基圖、日歷坐標系等。 | 折線圖及曲線圖、面積圖、柱狀圖及條形圖、餅圖及環形圖、散點圖及氣泡圖、儀表圖、關系圖、地圖等。除此之外，還支持23種特色類型圖，比如詞云圖、甘特圖、時序圖、貝爾曲線圖、極地圖等。 |
| 圖形顏色主題數 | 3 | 10 |
| 是否支持圖與圖之間的混搭 | √ | √ |
| 是否支持 3D圖 | √ | √ |
| 多種數據格式 | 二維表，key-value、GeoJSON 格式數據、TypedArray 格式數據。 | JavaScript 數組或對象、GeoJSON 格式數據。 |
| 地圖是否支持流加載 | √ | - |
| 移動端優化 | √ | √ |
| 多渲染方案 | Canvas、SVG（4.0+）、VML | SVG（4.0+）、VML |
| 是否支持多維數據 | √ | √ |
| 是否支持數據動態展示 | √ | √ |
| 是否支持縮放 | √ | √ |
| 是否支持坐標軸反轉 | √ | √ |
| 是否支持文本旋轉 | √ | √ |
| 是否支持導出與打印 | - | √ |
| 文檔是否詳細 | 一般 | 詳細 |
| 示例是否詳細 | 一般 | 詳細 |
| 商業化是否需要授權使用 | - | √ |
相對來說，Highcharts支持的可視化類型數更多。但對于某些類別的圖形種類來說，比如散點圖，Echarts 支持 24 種散點圖；而 Highcharts 只有 7 種。也就是說，Highcharts 提供的類型比較廣，而Echarts 在某些類別上形式比較多樣。
Highcharts 還有專門的股票圖表控件叫HIGHSTOCK， 支持直線圖、折線圖、面積圖、面積曲線圖、柱形圖、散點圖、蠟燭圖（OHLC）、K線圖、標簽圖、面積范圍圖、柱形范圍圖等多種圖表。
Echarts 的百度前端技術部開發維護的，所以在地圖領域較具有優勢。
而 Highcharts 是整家公司在開發維護，所以算是目前世界上圖表領域的領頭羊。但需要授權（https://highcharts.com.cn/highcharts），一個項目，2個開發，大概 8000左右。授權后還提供高級技術支持，比如主版本更新升級服務、一對一技術支持服務、7 * 24 小時緊急響應等等。
2.3.2 數據比較
| 圖表框架 | Github 評星數 | npm 下載數（平均每周） |
|---|---|---|
| ECharts | 39.8k | 183,103 |
| Highcharts | 9.3k | 607,755 |
GitHub是一個面向開源及私有軟件項目的托管平臺。
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平臺的默認包管理工具。通過 npm 我們可以安裝、共享、分發代碼,管理項目依賴關系。
通過 Github 評星數與npm 下載數，可以從數據角度分析出這些框架的流行度。相對來說，npm 下載數更實在一些。Highcharts 的每周下載量是 ECharts 3 倍以上，具有絕對優勢。
2.3.3 網上案例
某國字頭物流中心項目，擁有很多圖形化報表、算法復雜，開始使用 Echarts，團隊成員曾一度不想繼續干下去（bug 多、文檔、實例問題）。后來采用 Highcharts 重寫。
3 結論
項目涉及到的圖表比較簡單并且圖少，建議采用 ECharts。
項目涉及到的圖表復雜并且圖多，建議投入預算，采用 Highcharts。
