173
DataV接入ECharts圖表庫 可視化利器強強聯手
DataV 數據可視化是搭建每年天貓雙十一作戰大屏的幕後功臣，ECharts 是廣受數據可視化從業者推崇的開源圖表庫。從今天開始，DataV 企業版接入了 ECharts 圖表組件，當你使用 DataV 搭建可視化項目時，可以輕鬆地插入 ECharts，這意味著更豐富多樣的圖表效果，也讓編程小白們可以通過圖形界麵而非代碼配置 ECharts。
DataV 首批接入的 ECharts 圖表總共有15種。囊括了關係、柱形、熱力圖、儀表盤等各種常用圖形。
比如大家都很熟悉的玫瑰圖，
還有日曆圖，
炫酷的關係圖，
以及...K 線圖，現在都可以在 DataV 裏實現啦。有朋友問，你們為什麼放個 K 線圖進來？我當然不會告訴你是因為主力開發同學最近迷上炒股了啊。
接下來一起看看，加上了 ECharts 組件的 DataV 要怎麼玩。
閃電式組件添加
首先，來做下準備工作。進入 DataV 任意可視化項目的編輯麵板，點擊上方菜單欄的“更多組件”按鈕，選中“ECharts”圖標，再點擊確認添加，即可成功導入。
接下來這些 ECharts 圖表就會出現在組件列表裏麵，使用方法和其他組件完全相同。
舉個栗子，我們給上市公司“山水莊園”的看板上，加一張股價 K 線圖，通過點擊—拖動—調整大小三步實現，是不是頓時顯得高大上。還能通過時間軸拖動和鼠標 hover 實現簡單交互，這樣高小琴靠著一張圖就能掌控公司業務了。
圖形化組件配置
我在開頭提到，DataV 一大使用特點在於圖形化界麵配置，這對不熟悉代碼、沒時間學習 ECharts 文檔的用戶來說，絕對是福音。和原生組件一樣，用戶在使用的時候，在右側麵板中，可以完成對樣式和數據源的配置。
比方說我們想修改這個漏鬥圖，先點擊右側控製麵板的“數據”，選擇接入的數據源，DataV 支持接入 JSON、CSV、數據庫、API 等多種類型，完成數據上傳並匹配字段後，再點擊“樣式”按鈕，切換到樣式編輯器，在這裏調整圖表顏色、字體、排列順序、圖例等元素即可。
經過封裝後，原 ECharts 圖表的配置項，在“樣式”麵板裏全部保留，用戶通過簡單的下拉菜單和填寫數字就能修改配置，所見即所得，學習成本大大降低。
與原生圖表聯動
講完基礎使用方法後，再來看看老司機們怎麼玩。其實 DataV 原生圖表庫本身在樣式和功能上都不錯，和 ECharts 圖表結合能做出不少特效。例如將時間軸和 ECharts 熱力圖結合，利用組件間的回調ID功能，就能得到動態熱力圖啦。
這裏的關鍵步驟是在時間軸組件的回調ID中填入熱力圖數據源中的變量（該示例中即為年份），關於回調 ID 詳細的操作方法可以參考這篇教程。掌握這個方法以後，就不難實現其他組件之間的交互效果了。
結語
以上洋洋灑灑介紹了這麼多，相信大家都學會了，如果喜歡的話趕緊去 DataV 裏試試吧。不過上麵這些都不是我真正想說的，作為一個資深腐女，其實我眼中隻看到了一對耀眼的，可視化當紅 CP。
最後更新：2017-06-20 11:32:05