在Vue中使用Echarts地圖以及資料展示

效果圖如下（東營市地圖）

1.地圖顯示

首先要獲取該地區的JSON資料，網站：DATAV.GeoAtolas，逐步選擇地圖區域，然后復制資料到本地另存為dy.json，

直接上代碼了，添加了詳細備注

<template>
	<div id="mapView" class="map-view"/>
</template>
<script>
	//引入地圖資料
	import dy from '@/assets/dy'  
	//引入echarts以及提示框和標題組件
	const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/bar')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/grid')
    require('echarts/lib/chart/line')
    require('echarts/lib/chart/pie')
    require('echarts/lib/chart/gauge')
    require('echarts/lib/chart/map')
    require('echarts/lib/component/visualMap')
    require('echarts/lib/component/legend')
	
	export default {
	 	mounted() {
            this.getMapInfo()  //獲取地圖顯示的資料
        },
        methods: {
        	async getMapInfo() {
                let res = await getMapData() //自己封裝的請求方法
                this.buildMap(res.data) //有資料格式要求，下文細說
            },
            buildMap(data) {
                let myMap = echarts.init(document.getElementById('mapView'))  //初始化節點實體
                echarts.registerMap('東營', dy)   //注冊可用的地圖
                //配置項
                let option = {
                    //移入地圖時展示資訊
                    tooltip: {
                        trigger: "item",
                        backgroundColor: 'opacity',
                        //感覺代碼寫的不美觀，，，顯示的樣式根據情況而定
                        formatter: function(params) {
                            let obj1 = JSON.parse(JSON.stringify(params));
                            let obj = obj1.data.emphasis
                            let str = `
                                <ul style='width:200px; padding: 8px 20px;background: #0b2668;border: 1px solid #123c8e'>
                                    <li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #123c8e;padding-bottom: 5px'>
                                        <p>醫院</p>
                                        <p>接入設備數</p>
                                     </li>
                            `
                            for (let i = 0; i < obj.length; i++) {
                                str = str +
                                    `
                                        <li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;margin: 5px 0'>
                                            <p>${obj[i].name}</p>
                                            <p>${obj[i].value}</p>
                                        </li>
                                    `
                            }
                            str = str + "</ul>";
                            return str;
                        }
                    },
                    series: [
                        {
                            name: '東營市地圖',
                            type: 'map',
                            mapType: '東營', // 自定義擴展圖表型別，和上文注冊名字的一樣
                            itemStyle: {
                                normal: {  //正常狀態
                                    label: {
                                        show: true,
                                        formatter: '{b}-{c}',   //地圖上顯示的資料，分別對應data中的name和value
                                        color: '#fff',
                                    },
                                    areaColor: '#0a76d1'   //地圖區域的顏色
                                },
                                emphasis: { //  滑鼠移入高亮狀態
                                    label: {
                                        show: true
                                    },
                                    areaColor: '#ccb213'
                                },
                            },
                            aspectScale: 1,   //用于 scale 地圖的長寬比
                            zoom: 1,
                            top: '60',
                            data: data
                        }
                    ],

                }
                myMap.clear()
                myMap.setOption(option)
            },
        }
	 }
</script>

2.注意問題

• 和后端商定好你需要的資料格式，以我的專案為例，對照一下上文代碼，很容易看懂，
  

• 回傳資料的 name 一定要和你地圖資料（dy.json）中的地區名一致！差個空格都不行！！！

暫時就想到了這么多，收工，