摘要： 兩個扛把子級產品的結合，而且文末有彩蛋。

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。

更多技術乾貨及好文，請關注

官方微博：@阿里云云棲社群

官方微信：雲棲社群（yunqiinsight）

知乎官方機構號：阿里云云棲社群