在VUE里實現一個簡單的地圖

如何在vue裡面實現一個簡單的中國地圖，並且實現一些簡單的個性化修改。

下麵是最終實現的效果圖。透明的地圖加一個背景圖。

1、在你的項目里安裝echarts的依賴

npm install echarts -s

(使用淘寶鏡像安裝也行)

2、引入echarts

全局引入和局部引入根據自己的情況來定

全局引入：

在main.js裡面加入，將其掛載的vue的原型上。

1 import echarts from 'echarts'
2 Vue.prototype.$echarts = echarts

局部引入：

直接在用到的地方引入即可 “ import echarts from 'echarts'  ”

3、重點：

地圖和echarts的其他圖表不太一樣，需要引入地圖資源（如果引入了地圖的js就會自動註冊，引的是json文件的話就需要手動註冊到echarts上），如果沒有引的話是顯示不出地圖的。而這個也有很多坑。

分享一下china.js的下載鏈接 。

鏈接：https://pan.baidu.com/s/1qYYyyjrBUUqZedE3irVnzw
提取碼：566n

用於不是用vue開發的小伙伴們用，用vue的話可以在node_modules/echarts/map/js/china.js找到這個文件。然後開始引入china.js。

1 import "../../node_modules/echarts/map/js/china.js" //正常運行
2 import "../china.js" //報錯

這點我還沒弄清楚，兩個一模一樣的文件，一個是我本地自己下載的，一個是安裝echarts的時候安在node_modules裡面的。為什麼本地下載的就會報錯，報china.js裡面的this有錯。在沒有打包的情況下引入node_modules裡面的是可以正常運行的，打了包過後的情況我還沒測試到，後續可以更新一下。

4、配置地圖

在基礎工作都做好後開始給我們的地圖寫配置，以達到我們想要的效果。

給地圖準備一個dom

<div id="map" style="width: 500px;height: 500px;"></div>

配置

 1 export default {
 2         name: "home",
 3         mounted() {
 4             this.map();
 5         },
 6         methods: {
 7             map() {
 8                 let map = echarts.init(document.getElementById('map'));
 9                 // 繪製圖表
10                 map.setOption({
11                     series: [{
12                         name: '數據',
13                         type: 'map',
14                         mapType: 'china',
15                         top:'5%',
16                         //roam: true, //是否需要縮放地圖
17                         label: {
18                             normal: {
19                                 show: false //省份名稱  
20                             },
21                             emphasis: {
22                                 show: false
23                             }
24                         },
25                         itemStyle: {
26                             normal: {
27                                  borderColor: 'rgba(0, 0, 0, 0.3)',//區域描邊顏色
28                                 color:'rgba(0, 0, 0,0)',//區功能變數名稱字顏色，這裡是透明
29                                 areaColor:'rgba(0, 0, 0,0)',//區域顏色 透明
30                             },
31                         },
32                         emphasis:{
33                             itemStyle: {
34                                 areaColor:'rgba(111, 151, 242,0.3)',//高亮區域的顏色
35                             },
36                         },
37                         data: [{
38                                 name: '北京',//預設顯示區域的名字
39                                 selected: true//高亮顯示
40                             },
41                             {
42                                 name: '天津',
43                                 selected: true
44                             },
45                             {
46                                 name: '上海',
47                                 selected: true
48                             },
49                             {
50                                 name: '重慶',
51                                 selected: true
52                             },
53                             {
54                                 name: '河北',
55                                 selected: true
56                             },
57                             {
58                                 name: '河南',
59                                 selected: true
60                             },
61                             {
62                                 name: '四川',
63                                 selected: true
64                             }
65                         ]
66                     }]
67 
68                 });
69             }
70         }
71     };

以上就是全部步驟的代碼，有些地方還不是很清楚，但到達想要的效果後再繼續研究。