vue echart map 全国和地区数据

此案例并不是全国省市区下钻 只是展示全国或省或市的echarts地图

如果想看全国省市区下钻，请看此连接链接: 全国省市区下钻.

效果图如下(可通过省市区code改变echarts地图 当前为武汉市的地图
)

1.引入echarts

这一步就不说了 百度很多

<template>
    <div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</template>

import echarts from "echarts"  //先引入echarts

2.获取省市区边界数据

链接: 阿里云获取省市区边界数据链接.
（注意！注意！注意！）
接口存在权限和跨域问题，可以进去之后直接下载json文件当本地使用
接口存在权限和跨域问题，可以进去之后直接下载json文件当本地使用
接口存在权限和跨域问题，可以进去之后直接下载json文件当本地使用
不包含子区域边界 https://geo.datav.aliyun.com/areas_v2/bound/100000.json
包含子区域边界 https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json
获取区域边界数据，并根据需求对 features进行 map遍历 自行添加展示内容 如下的
name：省市区名称
value： 要展示的值
level： 此区域的省市区等级
cityCode：省市区的code

//areaCode 为省市区的code
axios.get('https://geo.datav.aliyun.com/areas_v2/bound/'+areaCode+'_full.json').then(res=>{
	console.log(res.data)  //获取的边界数据
	this.mapJson=res.data
	//对获取的每个子区域添加 name:省市区名称  value 要展示的值  level 此区域的省市区等级  cityCode：省市区的code   
	//可通过需求自行添加和修改
	this.mapData = this.mapJson.features.map(item => {  
         return ({
             	name: item.properties.name,
                value: 1000,
                level: item.properties.level,
                cityCode: item.properties.adcode
        })
   })
   this.init()//调用下面的 echarts初始化
})

3.初始化echarts地图

	init(){
		var myChart = echarts.init(document.getElementById('map'));
		echarts.registerMap('cityMap',this.mapJson,{});  //加载自定义边界数据地图
		var option = {
			// backgroundColor:'#04222e',// 背景颜色
			tooltip: {
				trigger: 'item',
				formatter: p => {
                        console.log(p)
                        let val = p.value;
                        if (window.isNaN(val)) {
                            val = 0;
                        }
                        let txtCon =
                           "<div style='text-align:center'> 地区：" + p.name + "<br />value值：" + p.data.value + "<br />code：" + p.data.cityCode + '</div>';
                        return txtCon;
                    }
			}
			series: [
				{
					name: '地图',
		            type: 'map',
		            mapType: 'cityMap',
                    aspectScale: 0.85,  //地图长度比
                    itemStyle: {
                            normal: {
                                show: true,
                                areaColor:'#031525', //地图区域的颜色 也可以颜色渐变如下的 areaColor
                                // areaColor:{
                                //     type: 'radial',
                                //     x: 0.5,
                                //     y: 0.5,
                                //     r: 0.8,
                                //     colorStops: [{
                                //         offset: 0,
                                //         color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                //     }, {
                                //         offset: 1,
                                //         color: 'rgba(147, 235, 248, .5)' // 100% 处的颜色
                                //     }],
                                //     globalCoord: false // 缺省为 false
                                // },
                                borderColor: '#0CD5DD', //边界线颜色
                                borderWidth: '1', //边界线的宽度
                            },
                            emphasis: { // 鼠标移入时区域的样式
                              areaColor: '#2AB8FF',
                              borderWidth: 0,
                              color: 'green'
                            }
                        },
                        label: {
		                    normal: {
		                        show: true,
		                        textStyle: {
		                            color: '#fff'  //省市区字体颜色
		                        }
		                    },
		                    emphasis: {//对应的鼠标悬浮效果
		                        show: true,
		                        textStyle: {
		                            color: '#333'  //鼠标移入对应的省市区字体颜色
		                        }
		                    }
		                },
		                data: this.mapData   // 上面添加了 name,value,level,cityCode的数据
				}
			]
		}
		myChart.setOption(option);
	}

还有一种方法是可以通过全国省市区下钻的数据来展示全国或区域地图 链接如下