因需兼容ie，此处所有变量声明都用var。如无需支持，可另做let修改。 这里以常州市为例,我们可以去阿里云提供的地理工具去截取地图json数据DataV.GeoAtlas地理小工具系列

点击所选区域，右侧会对应显示json数据，再次点击右侧红框内的第一个按钮即可复制南通市的geoJson数据，同时按照此方法，把常州市内的所有区县的地图数据都保存为单个json文件，

html主要代码

<div class="map" id="map"></div>//此处为常州大市的图表<div class="map" id="map_ct" style="display: none"></div>//单个区县行<!--中文转拼音js-->
<script src="../static/js/pinyin4js.js"></script>

js方法：需要注意的是初始化市级地图必须要销毁click事件，同时切换到二级行政区必须要先清空图表信息，否则会有上一次的地图残影闪烁，此处点击获取二级行政区另外使用了pinyin4js.js中文转拼音的插件，点击即可免费下载使用，因不需要声调，只需要拼音来获取对应的geoJson数据，即可

function echarts(data) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('map'));var option;var convertData = function convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,// value: geoCoord.concat(0,0).concat(data[i].value),value: geoCoord,itemStyle: {color: 'white'}});}}return res;};myChart.showLoading();$.get('../static/js/bdcDp/changzhouMap/changzhou.json', function (geoJson) {//此处地址为所保存的南通市的jsonmyChart.hideLoading();myChart.hideLoading();echarts.registerMap('changzhou', geoJson);myChart.setOption(option = {tooltip: {trigger: 'item',}},geo: {map: 'nantong',roam: false, // 不开启缩放和平移zoom: 1, // 视角缩放比例top: 50,aspectScale: 0.8,label: {normal: {show: false,fontSize: '10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal: {areaColor: '#2282d6',borderColor: '#2282d6',borderWidth: 1,borderType: 'solid',opacity: 0.8,shadowBlur: 10,shadowColor: '#080D15',shadowOffsetX: 5,shadowOffsetY: 5},emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#fff' // 0% 处的颜色}, {offset: 1,color: '#fff' // 100% 处的颜色}],globalCoord: false // 缺省为 false}}}},series: [{type: 'map',geoIndex: 1,aspectScale: 0.8,map: 'changzhou',zoom: 1,top: 42,roam: false,nameProperty: 'name',colorBy: 'series',data:data,itemStyle: {borderColor: '#3dd4ff',borderWidth: '2',// shadowBlur: 20, //软阴影值shadowColor: '#95d3fd',shadowOffsetX: 0,// shadowOffsetY: 0,emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#2332c5' // 0% 处的颜色}, {offset: 1,color: '#2332c5' // 100% 处的颜色}],globalCoord: false // 缺省为 false},label: {show: false}}}}, {name: 'city',type: 'effectScatter',rippleEffect: {// 涟漪特效相关配置。scale: 4 // 控制涟漪大小},colorBy: 'series',coordinateSystem: 'geo',data: convertData(data),label: {formatter: '{b}',position: 'right',show: true,fontSize:18,color: '#2E9FF6'},itemStyle: {color: '#ffffff',shadowBlur: 10,shadowColor: '#333'},tooltip: {formatter: '{b0}'}}]});});// 使用刚指定的配置项和数据显示图表。// myChart.setOption(option)setTimeout(function () {myChart.resize();}, 200)window.addEventListener('resize', function () {myChart.resize();});//销毁点击事件myChart.off('click');myChart.on("click", function (params) {qxmc = params.name;color =  params.color;// 显示返回按钮$(".gobackMap").show();//此处用于返回一级市区大地图});
}// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('map_ct'));//清空图表信息 否则会有上一次地图的残影闪烁myChart.clear();var option;var geoCoordMap = {天宁区: [120.11, 31.84],新北区: [119.9, 31.92],钟楼区: [119.85, 31.81],金坛区: [119.5, 31.74],武进区: [119.91, 31.6],溧阳市: [119.39, 31.46]};//匹配地图坐标值var convertData = function convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];//取传入的区县值if ( !isNullOrEmpty(geoCoord) &&data[i].name==qxmc) {res.push({name: data[i].name,value: geoCoord,itemStyle: {color: 'white'}});}}return res;};//判断返回的区县地图 此处调用了pinyin4js.js中文转拼音的插件 qxmc是点击地图获取的区县名称 后面是格式var area = PinyinHelper.convertToPinyinString(qxmc,'', PinyinFormat.WITHOUT_TONE)// myChart.showLoading();$.get('../static/js/bdcDp/changzhouMap/' + area + '.json', function (geoJson) {// myChart.hideLoading();//展示地图echarts.registerMap('changzhou', geoJson);//地图配置myChart.setOption(option = {tooltip: {trigger: 'item',formatter: function formatter(params) {
//如无需显示该处代码可忽略，此处多为显示对应区县的某些数据var res = params.name + '<br/>';var myseries = params.data.value;if (isNotBlank(myseries)) {res += '总面积:' + myseries[0] + '万㎡' + '<br/>' + '套数:' + myseries[1] + '<br/>';} else {res += '总面积:' + 0 + '万㎡' + '<br/>' + '套数:' + 0 + '<br/>';}return res;},textStyle: {fontFamily: "Microsoft YaHei",fontSize:18}},geo: {map: 'changzhou',roam: false, // 不开启缩放和平移zoom: 1, // 视角缩放比例top: 50,aspectScale: 0.8,label: {normal: {show: false,fontSize: '10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal: {areaColor: '#2282d6',borderColor: '#2282d6',borderWidth: 1,borderType: 'solid',opacity: 0.8,shadowBlur: 10,shadowColor: '#080D15',shadowOffsetX: 5,shadowOffsetY: 5},emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#fff' // 0% 处的颜色}, {offset: 1,color: '#fff' // 100% 处的颜色}],globalCoord: false // 缺省为 false}}}},series: [{type: 'map',geoIndex: 1,aspectScale: 0.8,map: 'changzhou',zoom: 1,top: 42,roam: false,nameProperty: 'name',colorBy: 'series',data: data,itemStyle: {borderColor: '#3dd4ff',borderWidth: '2',shadowBlur: 20,shadowColor: '#95d3fd',shadowOffsetX: 0,shadowOffsetY: 0,emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#2332c5' // 0% 处的颜色}, {offset: 1,color: '#2332c5' // 100% 处的颜色}],globalCoord: false // 缺省为 false},label: {show: false}}}}, {name: 'city',type: 'effectScatter',rippleEffect: {// 涟漪特效相关配置。scale: 4 // 控制涟漪大小},colorBy: 'series',coordinateSystem: 'geo',data: convertData(data),label: {formatter: '{b}',position: 'right',show: true,fontSize:18,color: '#1292F5'},itemStyle: {color: '#ffffff',shadowBlur: 10,shadowColor: '#333'},tooltip: {formatter: '{b0}'}}]});});setTimeout(function () {myChart.resize();}, 200)window.addEventListener('resize', function () {myChart.resize();});
}