因需兼容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) {//此处地址为所保存的南通市的json
myChart.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();
});
}
