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

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

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

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

npm install echarts -s

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

2、引入echarts

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

全局引入：

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

import echarts from 'echarts'
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。

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

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

4、配置地圖

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

給地圖准備一個dom

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

配置

export default {
        name: "home",
        mounted() {
            this.map();
        },
        methods: {
            map() {
                let map = echarts.init(document.getElementById('map'));
                // 繪制圖表
                map.setOption({
                    series: [{
                        name: '數據',
                        type: 'map',
                        mapType: 'china',
                        top:'5%',
                        //roam: true, //是否需要縮放地圖
                        label: {
                            normal: {
                                show: false //省份名稱  
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                 borderColor: 'rgba(0, 0, 0, 0.3)',//區域描邊顏色
                                color:'rgba(0, 0, 0,0)',//區域名字顏色，這里是透明
                                areaColor:'rgba(0, 0, 0,0)',//區域顏色 透明
                            },
                        },
                        emphasis:{
                            itemStyle: {
                                areaColor:'rgba(111, 151, 242,0.3)',//高亮區域的顏色
                            },
                        },
                        data: [{
                                name: '北京',//默認顯示區域的名字
                                selected: true//高亮顯示
                            },
                            {
                                name: '天津',
                                selected: true
                            },
                            {
                                name: '上海',
                                selected: true
                            },
                            {
                                name: '重慶',
                                selected: true
                            },
                            {
                                name: '河北',
                                selected: true
                            },
                            {
                                name: '河南',
                                selected: true
                            },
                            {
                                name: '四川',
                                selected: true
                            }
                        ]
                    }]

                });
            }
        }
    };

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