可視化圖表——ECharts

這是一個，直觀的、生動的、可交互的、可高度個性化定製的、開源的，無論是顏值，實用性，還是易用性都超越了你所有想像的一款Web數據可視化數據圖表產品。

2018-04-07

先來看一波示例

餅狀圖：

可以選擇對特定的數據進行百分比計算

GIF

柱狀圖：

可以動態切換數據視圖

GIF

GIF

條形圖：

縮放以及散點分布的示例

GIF

地圖視圖：

因為ECharts是百度的開源產品，對百度地圖也是無縫連接。結合百度地圖的圖層，可以做出航線、地鐵、公交等動態3D線路圖

GIF

使用步驟

在傳統的web應用中使用非常簡單：

1.引入ECharts

// 如果是3D圖表，還需要額外引入echarts-gl.js

2.給ECharts 準備一個具備高寬的 DOM 容器

3.設置參數

// 指定圖表的配置項和要顯示的數據；此項配置詳見官方文檔

var option = { ... ... ... };

4.初始化圖表

// 基於準備好的dom，初始化echarts實例

var myChart = echarts.init(document.getElementById("main"));

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

僅4步即可完成一個任意類型的圖表。不同類型的區別僅在於option的參數設置，option參數中包含了圖表的設置和圖表需要展示的數據

推薦理由一

初期是為了完成顯示「數據統計圖」這項功能，老大推薦用ECharts做。看了一個官方示例，真真兒地被折服，世上竟有如此美艷動人、功能強大、性能優異的數據圖產品，也是百度ECharts團隊開源免費的。

使用起來很方便，雖然在設置option那一步有點複雜，要深入起來還需要細讀開發文檔各個參數的含義（配置項非常之多），但是官方為了方便用戶快速上手，也提供了非常多的示例，代碼也一併展示。可以直接使用官方文檔的示例代碼，你要做的僅僅只是更換掉要展示的數據而已。

所以上手快，是第一個推薦理由。

推薦理由二

上手使用也就分秒鐘複製、粘貼的事情，毫無難度。推薦ECharts的另一個理由絕對是對數據處理能力的要求。

例如，現在有一個3D的數據圖表，顯示效果如下：

圖表要求的數據格式如下（數據內容純屬虛構）：

data_3D_x 表示X軸要展示的數據數組

data_3D_y 表示Y軸要展示的數據數據

data_3D 表示Z軸要展示的數據數組。這是一個三維數組組成的一個數組，例如在上述三維數組中第一個元素 [0,0,5] 中，第一個數字0表示X軸數組的下標，第二個數字0表示Y軸數組的下標，第三個數字5表示Z軸需要展示的值。

當這些數據準備好之後，使用官方示例中的option設置，就可以達到上圖展示的效果。3D圖表支持滑鼠拖拽切換視角，滑鼠滾輪進行縮放，滑鼠懸停在數據條形柱上可以展示數據對應的XYZ軸的數據值。

那麼就要求後台對數據演算法的支持了。

如何準確的得到規定格式的數據？

如何準確的、動態的得到規定格式的數據？

如何準確的、動態的、高效的得到規定格式的數據？

ECharts絕對對演算法和SQL有一定要求。很多數據沒有辦法直接通過SQL語句完成，需要後台對數據進行進一步處理才能得到。絕對是一個鍛煉演算法和SQL功底的好途徑。

最後，ECharts仍是最讓我驚艷的一款數據產品，它滿足了甚至超越了我對數據可視化的所有想像，無論是顏值，實用性，還是易用性。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！