建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家介紹在vue中使用echarts和datav實現(xiàn)一個地圖功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
隨著前端技術的飛速發(fā)展，大數據時代的來臨，我們在開發(fā)項目時越來越多的客戶會要求我們做一個數據展示的大屏，可以直觀的展示用戶想要的數據，同時炫酷的界面也會深受客戶的喜歡。
大屏展示其實就是一堆的圖表能夠讓人一目了然地看到該系統(tǒng)下的一些基本數據信息的匯總，也會有一些實時數據刷新，信息預警之類的。筆者在之前也做過一些大屏類的數據展示，但是由于都是一些圖表類的，覺得沒什么可說的，加之數據也都牽扯到公司，所以沒有沉淀下來什么。
最近有朋友要做一個大屏，問了自己一個問題，自己也剛好做了一個簡單的大屏數據展示，趁此機會做一個小總結。
先看一下效果：
由于數據牽扯到公司內部信息，所以將一些復雜的切換邏輯都去掉類，但保留了一些數據間但相互聯(lián)動。
項目采用的是Vue+Echanrts+datav寫的，結構目錄如下：
由于只是一個單一頁面，數據處理也不是復雜，沒有涉及到router和vuex，從結構目錄上看就是一個很典型的vue-cli項目，在之前我也講過關于vue-cli項目的一些操作和目錄結構解釋，這里就不做多做說明了，在文章最后會提供該項目的源碼地址庫。
大屏主要的炫酷效果本人引用的是datav組件，地址：http://datav.jiaminghi.com/,這簡直就是數據可視化的一款神器，神奇之處我就不多說了，大家可以自己去它的網站上自行體會。它也提供了如何在vue 中使用該組件。
datav可以全局注入，也可以按需注入，本人省事就直接在main.js中進行了全局注入。
所有的頁面代碼都放在了views文件目錄下：
其中index.vue文件為主文件入口，其他都是其子組件，組件名稱以方位的形式命名，如centerForm.vue就是中間的表單控件。
本項目引入了中國地圖并實現(xiàn)省市縣下鉆，最初采用的是阿里旗下的高德地圖，后來因為種種原因改為了百度提供的Echarts來實現(xiàn)，但兩種使用方法都保留了下來，大家可以根據自己的需求進行選擇。
其中Echarts中國地圖的代碼如下：
返回
名稱欄目：在vue中使用echarts和datav實現(xiàn)一個地圖功能-創(chuàng)新互聯(lián)
鏈接分享：http://fisionsoft.com.cn/article/dscipp.html
