在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）中的地区名一致！差个空格都不行！！！

暂时就想到了这么多，收工。