vue使用echarts来绘制中国地图下钻省市区县级地图

---

前言

公司需要一个中国地图点击可进入省市区县级，但是在我使用echarts绘制中国地图省市地区时发现官网只支持到省的json文件，地区文件需要自己去找，前两天我找到了下载了一份全新的json文件，下载时间市2020年10月27日

---

一、echarts

官网：https://echarts.apache.org/zh/index.html

全国省市区县级地图JSON文件：https://download.csdn.net/download/weixin_43898407/13071019

自己下载：datav地图选择器http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
使用datav地图选择器的json文件太卡顿了，所以我全都下载下来了

二、使用步骤

1.vue安装、引入echarts

代码如下：

//下载echarts
npm install echarts --save

//main.js中全局引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.使用echarts

我直接就只复制了下钻的最后一级的代码，全国和全省的都是一样的，点击城市发送对应的行政代码，行政代码和json的名称是一样的，获取json文件加载地图就行。

<template>
	<div id="County" :style="{width: '100%', height: '470px'}"></div>
</template>
<script>
export default {
	mounted () {
		//我这里直接获取static文件夹中的json文件，this.code是点击全省发送过来的城市对应的行政代码
		//也可以写'https://geo.datav.aliyun.com/areas_v2/bound'+this.code+'_full.json'
		axios.get('static/county/'+this.code+'_full.json').then(response => {
                    echarts.registerMap('county',response.data)
                    var chart = echarts.init(document.getElementById("County"));
                    chart.setOption({ 
                        backgroundColor: '#142942', //地图背景颜色
                        title: {},
                        legend: {},
                        tooltip : {
                            appendToBody: true ,
                            triggerOn: 'click',   //触发方式
                            enterable: true, // 
                            trigger:'item',
                            confine: true,
                            alwaysShowContent:false,
                            formatter:function(params){//点击进入下级城市的点击事件可以写在这个div里
                                return `
                                <div class='pop-up'>
                                    <div class='pop-up-title'>
                                        <p style="margin:0;">地区：`+params.name+`</p>
                                        <p style="margin:0;">人数：`+params.value+`</p>
                                    </div>&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>` 
                            },
                        }, 
                        visualMap: {
                            type: 'piecewise',
                            orient:'horizontal', 
                            realtime: false,
                            left: '5%',
                            bootom:'bootom',
                            textStyle: {
                                color: "rgba(232, 218, 218, 1)"
                            },
                            pieces: [
                                {min: 10, max: 25,label:'点亮数11—25'},
                                {min:1, max:10,label:'点亮数1—10'},
                                {max:1,label:'未点亮区域'}
                            ],
                            color: ['#5adf5a', '#c4ffc4','#4a5b71' ],
                        },
                        geo: { // 这个是重点配置区
                            map:'county', // 需要对应echarts.registerMap('county',response.data)
                            roam: true,
                            zoom: 1.2,
                            label: {
                                normal: {
                                    show: true, // 是否显示对应地名，
                                    textStyle: {
                                        color: '#b7cfee'
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: '#cc3041'
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {//地图背景色    
                                },
                            }
                        },
                        series: [{
                            type: 'scatter',
                            coordinateSystem: 'geo' // 对应上方配置
                            },{
                            type: 'map',
                            zoom: 1.25,
                            mapType: 'county',
                            geoIndex: 0,
                            roam: false,
                            showLegendSymbol: true,
                            data: [
                            //这里写获取到的后台数据，或者你自己需要加载的数据
                            ]
                        }]
                    });
                return chart
                }, response => {
                    console.log('失败');
                });
       }  
}                 
</script>

---

总结

我只写了点击加载对应城市的代码，其他都是一样的，照葫芦画瓢或者封装到组件中使用也可以，里面的配置可以根据官网自己调整，有的需要动态改变，所以我删了，
json文件省和城市都是对应的区划代码，我是2020年10月27下载的，应该算最新的了。