-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
213 lines (199 loc) · 7.75 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>中国地图</title>
<link rel="stylesheet" href="./css/base.css" />
</head>
<body>
<section class="map-box">
<div id="map-box" style="width: 1440px; height: 916px"></div>
</section>
<nav class="nav-box">
<a href="/Echarts-Map-Icon/index.html">中国</a>
<a href="/Echarts-Map-Icon/province.html">省份</a>
<a href="/Echarts-Map-Icon/city.html">城市</a>
<a href="/Echarts-Map-Icon/county.html">区县</a>
</nav>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.min1.js"></script>
<script src="./js/china-data.js"></script>
<script>
//自动切换定时器， 自动切换项
let timer = null,
nows = -1;
//初始Echarts实例对象
const oMap = echarts.init(document.querySelector("#map-box"));
// echarts.registerMap('wuhan', require('../map/wuhan.json'));
oMap.setOption({
title: {
text: "中国 地理图形",
left: "center",
textStyle: {
color: "white",
fontStyle: "normal",
fontWeight: "bold",
fontSize: 36,
lineHeight: 86,
textBorderColor: "green",
textBorderWidth: 1,
textShadowColor: "white",
textShadowBlur: 20,
textShadowOffsetX: 2,
textShadowOffsetY: 2,
},
},
// 提示框组件(可以设置在多种地方)
tooltip: {
show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
trigger: "item", //触发类型。item,axis,none
enterable: true, //鼠标是否可进入提示框浮层中，默认为false，
showContent: true, //是否显示提示框浮层
triggerOn: "mousemove", //提示框触发的条件(mousemove|click|none)
showDelay: 200, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
textStyle: {
color: "white",
fontSize: 12,
},
padding: [0, 8],
hideDelay: 10, //浮层隐藏的延迟
// formatter: (o) => (o.data) ? `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',
formatter: (o) => {
const userData = [
{ name: "江西省", num: 35 },
{ name: "贵州省", num: 36 },
];
for (let i = 0; i < userData.length; i++) {
return userData[i].name == o.name
? `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}，用户数：${userData[i].num}</h3></div><i></i></section>`
: `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>`;
}
},
backgroundColor: "#00a2e3", //提示框浮层的背景颜色。
alwaysShowContent: true,
transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
},
//地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
geo: {
show: true,
map: "china",
roam: false,
// top: '10%',
left: "center",
zoom: 1.02,
aspectScale: 0.9,
itemStyle: {
normal: {
opacity: 1, //图形透明度 0 - 1
borderColor: "#0e3c6d", //图形的描边颜色
borderWidth: 2, //描边线宽。为 0 时无描边。
borderType: "solid", //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee
areaColor: "#0063cc", //图形的颜色 #eee
},
},
},
//系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
series: [{
map: "china",
type: "map",
zoom: 1, //当前视角的缩放比例。
aspectScale: 0.9, //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale
roam: false, //是否开启鼠标缩放和平移漫游。默认不开启
label: {
show: false,
textStyle: {
color: "white",
fontSize: 12,
backgroundColor: "", //文字背景色
},
},
itemStyle: {
normal: {
borderColor: "#4b93da", //图形的描边颜色
borderWidth: 2, //描边线宽。为 0 时无描边。
borderType: "solid", //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee
shadowBlur: 100, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#133988", //阴影色
shadowOffsetX: 20, //X轴阴影
shadowOffsetY: -20, //Y轴阴影
label: {
show: true,
textStyle: {
fontWeight: "bold",
color: "white",
fontSize: 14,
},
},
},
//鼠标移入时
emphasis: {
borderColor: "#005b89",
borderWidth: "1",
areaColor: "#17beed",
label: {
show: false,
textStyle: {
color: "yellow",
fontSize: 14,
},
},
},
effect: {
show: true,
shadowBlur: 10,
loop: true,
},
},
//自定义图片数组对象[{}, {}...]
},
...chinaData.map((item, index) => {
return {
type: "scatter",
coordinateSystem: "geo",
//自定义图片的 位置（lng, lat）
data: [{ name: item.name, value: [item.lng, item.lat] }],
//自定义图片的 大小
symbolSize: [80, 60],
//自定义图片的 路径(注：必须以image://开头)
symbol: `image://img/icon/icon (${index}).png`,
};
}),
],
});
//自动切换
const autoShow = (length) => {
nows = (nows + 1) % length;
oMap.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: nows,
});
};
//每隔5秒钟自动切换到下一个数据点
autoShow(chinaData.length);
clearInterval(timer);
timer = window.setInterval(() => {
autoShow(chinaData.length);
}, 5000);
// 点击事件
oMap.on("click", function (res) {
console.log(res);
if ("scatter" === res.componentSubType) {
alert(`点击了 ${res.name} 图标`);
}
if ("map" === res.componentSubType) {
alert(`点击了 ${res.name} 地图`);
}
});
// 自适应屏幕
// window.addEventListener("resize",function(){
// console.log(oMap)
// oMap.resize();
// });
</script>
</body>
</html>