地图效果
省地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地图</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<script type="text/javascript" src="static/js/echarts.min.js"></script>
<!-- 全国344个市、区、州对应的数字编号 -->
<script type="text/javascript" src="static/js/citymap.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:800px;"></div>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>
//地图容器
var chart = echarts.init(document.getElementById('main'));
//34个省、市、自治区的名字拼音映射数组
var provinces = {
//23个省
"台湾": "taiwan",
"河北": "hebei",
"山西": "shanxi",
"辽宁": "liaoning",
"吉林": "jilin",
"黑龙江": "heilongjiang",
"江苏": "jiangsu",
"浙江": "zhejiang",
"安徽": "anhui",
"福建": "fujian",
"江西": "jiangxi",
"山东": "shandong",
"河南": "henan",
"湖北": "hubei",
"湖南": "hunan",
"广东": "guangdong",
"海南": "hainan",
"四川": "sichuan",
"贵州": "guizhou",
"云南": "yunnan",
"陕西": "shanxi1",
"甘肃": "gansu",
"青海": "qinghai",
//5个自治区
"新疆": "xinjiang",
"广西": "guangxi",
"内蒙古": "neimenggu",
"宁夏": "ningxia",
"西藏": "xizang",
//4个直辖市
"北京": "beijing",
"天津": "tianjin",
"上海": "shanghai",
"重庆": "chongqing",
//2个特别行政区
"香港": "xianggang",
"澳门": "aomen"
};
//直辖市和特别行政区-只有二级地图，没有三级地图
var special = ["北京","天津","上海","重庆","香港","澳门"];
var mapdata = [];
//绘制全国地图
$.getJSON('static/map/china.json', function(data){
d = [];
for( var i=0;i<data.features.length;i++ ){
d.push({
name:data.features[i].properties.name
})
}
mapdata = d;
//注册地图
echarts.registerMap('china', data);
//绘制地图
renderMap('china',d);
});
//地图点击事件
chart.on('click', function (params) {
console.log( params );
if( params.name in provinces ){
//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
$.getJSON('static/map/province/'+ provinces[params.name] +'.json', function(data){
echarts.registerMap( params.name, data);
var d = [];
for( var i=0;i<data.features.length;i++ ){
d.push({
name:data.features[i].properties.name
})
}
renderMap(params.name,d);
});
}else if( params.seriesName in provinces ){
//如果是【直辖市/特别行政区】只有二级下钻
if( special.indexOf( params.seriesName ) >=0 ){
renderMap('china',mapdata);
}else{
//显示县级地图
$.getJSON('static/map/city/'+ cityMap[params.name] +'.json', function(data){
echarts.registerMap( params.name, data);
var d = [];
for( var i=0;i<data.features.length;i++ ){
d.push({
name:data.features[i].properties.name
})
}
renderMap(params.name,d);
});
}
}else{
renderMap('china',mapdata);
}
});
//初始化绘制全国地图配置
var option = {
backgroundColor: '#000',
title : {
text: '中国地图',
subtext: '省市区三级下钻',
link:'http://www.ldsun.com',
left: 'center',
textStyle:{
color: '#fff',
fontSize:16,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
},
subtextStyle:{
color: '#ccc',
fontSize:13,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
},
iconStyle:{
normal:{
color:'#fff'
}
}
},
animationDuration:1000,
animationEasing:'cubicOut',
animationDurationUpdate:1000
};
function renderMap(map,data){
option.title.subtext = map;
option.series = [
{
name: map,
type: 'map',
mapType: map,
roam: false,
nameMap:{
'china':'中国'
},
label: {
normal:{
show:true,
textStyle:{
color:'#999',
fontSize:13
}
},
emphasis: {
show: true,
textStyle:{
color:'#fff',
fontSize:13
}
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: 'dodgerblue'
},
emphasis: {
areaColor: 'darkorange'
}
},
data:data
}
];
//渲染地图
chart.setOption(option);
}
代码和数据包下载地址 https://download.csdn.net/download/terry711/12289226
也可以私信邮箱，看到私信会马上转发。