-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
78 lines (78 loc) · 3.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市下钻</title>
<script src="jquery.js"></script>
<script type="text/javascript" src="echarts-all-3.js"></script>
</head>
<body>
<div id="maps" style="width: 800px; height: 800px"></div>
<script>
var dom = document.getElementById("maps");
var myChart = echarts.init(dom);
function init_option(name) {
return {
backgroundColor: '#404a59',
title: {
text: name=='china'?"全国":provincesText[currentIdx],
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [
{
type: 'map',
mapType: name,
label: {
normal: {
show: true
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff'
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
}
]
}
}
myChart.on('click', function (param) {
//param.dataIndex 台湾是0 河北是1...香港32 澳门33 排序和下面完全相同 南海诸岛是-1 无param.name
var dataIndex=param.dataIndex;
dataIndex<34&&dataIndex>-1?currentIdx=param.dataIndex:"";
showProvince() ;
});
var provinces = ['taiwan','hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'shanghai','chongqing', 'xianggang', 'aomen'];
var provincesText = ['台湾','河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '上海','重庆', '香港', '澳门'];
function showProvince() {
var name = currentIdx==100?'china':provinces[currentIdx]; //100时为全国，不然取省
myChart.showLoading();
$.get('province/' + name + '.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap(name, geoJson);
myChart.setOption(
option = init_option(name)
);
});
}
var currentIdx = 100;
option = {
series: []
};
showProvince();
</script>
</body>
</html>