<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.huanggefan.cn/echarts/4.6.0/echarts.js"></script>
<script src="https://cdn.huanggefan.cn/jquery/3.4.1/jquery-3.4.1.js"></script>
<title>ECharts China Map Demo</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div id="main" style="height:100%; width:100%"></div>
<script type="text/javascript">
//地图容器
var chart = echarts.init(document.getElementById(\'main\'));
//34个省、市、自治区的名字拼音映射数组
var provinces = [
//23个省
"台湾省",
"河北省",
"山西省",
"辽宁省",
"吉林省",
"黑龙江省",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"海南省",
"四川省",
"贵州省",
"云南省",
"陕西省",
"甘肃省",
"青海省",
//5个自治区
"新疆维吾尔自治区",
"广西壮族自治区",
"内蒙古自治区",
"宁夏回族自治区",
"西藏自治区",
//4个直辖市
"北京市",
"天津市",
"上海市",
"重庆市",
//2个特别行政区
"香港特别行政区",
"澳门特别行政区"
];
var mapdata = [];
//绘制全国地图
$.getJSON(\'../data/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) {
if (provinces.indexOf(params.name) != -1) {
$.getJSON(\'../data/province/\' + 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 = {
tooltip: {
trigger: \'item\',
formatter: \'{b}\'
},
animationDuration: 1000,
animationEasing: \'cubicOut\',
animationDurationUpdate: 1000,
};
function renderMap(map, data) {
option.series = [{
name: map,
type: \'map\',
mapType: map,
// roam: false,
zoom: 1,
nameMap: {
\'china\': \'中国\'
},
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
roam: true,
itemStyle: {
normal: {
borderColor: \'rgba(147, 235, 248, 1)\',
borderWidth: 1,
areaColor: {
type: \'radial\',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: \'rgba(175,238,238, 0)\' // 0% 处的颜色
}, {
offset: 1,
color: \'rgba( 47,79,79, .1)\' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: \'rgba(128, 217, 248, 1)\',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: \'#389BB7\',
borderWidth: 0
}
},
data: data
}];
//渲染地图
chart.setOption(option);
}
</script>
</body>
</html>