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。
