vue2.x+vue-cli3.0地圖demo踩過的坑

1、前言

一、背景

最近在作數據可視化的學習，從網上找了一下，沒有相關的學習資料，打算結合本身的摸索和學習，記錄一下踩過的坑，便於後續查閱以及供你們參考學習。

二、版本包

nodejs:12.14.0

vue:2.6.10

vue-cli:3.0.1

echarts:4.6.0

2、地圖項目實戰

一、項目初始化 打開cmd命令窗口，進入本地某個路徑下，運行vue create vue-map命令，便可初始化一個vue項目。用vscode打開項目，目錄以下所示：

而後根據命令行中的提示，運行cd vue-map命令，進入vue-map項目路徑下，最後運行npm run serve，而後在瀏覽器中便可看到項目首頁。

二、建立地圖組件

在組件的div中填寫中國地圖四個字。

在app.vue中引入EchartsMap

而後打開瀏覽器便可看到界面已經被渲染了。

三、安裝依賴包

（1）安裝echarts

（2）安裝axios

（3）導echarts和axios包

（4）建立生命週期鉤子和函數

四、axios請求數據

特別說明：

（1）vue-cli 2.x靜態json文件是直接放在static路徑下的，而vue-cli 3.x在項目建立時，沒有static文件夾，靜態文件是放在public文件夾下，因此地圖文件的json數據須要放在public文件夾下面，因此在vue-cli 3.x中請求數據的路徑以下所示：

vue-cli 2.x下的數據請求方式以下：

（2）vue-cli 3.x的首頁是：localhost:8080/public/index.html，在瀏覽器中輸入localhost:8080或者localhost:8080/public/index.html是同樣的，因此根路徑爲index.html的路徑。

vue-cli 2.x工程目錄，根目錄是index.html文件所在目錄。

（3）在vue-cli 2.x中能夠直接寫console.log（），而vue-cli 3.x中須要window.console.log()。 打印的數據以下所示：

五、配置地圖樣式 label:用於顯示各個省或市等的名字 itemStyle:用於設置每一個多邊形（好比省市等）的樣式

data:部分能夠先不用，等使用visualMap組件時，須要在數據中加入其它維度給 visualMap 組件用來映射到顏色等其它圖形屬性。

六、設置地圖自適應尺寸

在 mapChart方法中的最後添加如下代碼便可。

七、窗口尺寸設置

默認狀況，index.html的height的高度爲0，因此必需要設置index.html中的height，否則會看到程序無錯誤，而沒有地圖顯示。

首先在index.html中添加height信息。

而後在組件EchartMap.vue中添加height信息

八、地圖項目頁面顯示以下：