-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathprovince.html
221 lines (200 loc) · 8.9 KB
/
province.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
214
215
216
217
218
219
220
221
<!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/guizhou.min.js"></script>
<script src="./js/guizho-data.js"></script>
<script>
//自动切换定时器， 自动切换项
let timer = null, nows = -1;
//初始Echarts实例对象
const oMap = echarts.init(document.querySelector('#map-box'));
//指定加载省、市、县、区（注：由于这里没有用模块化方式导入，所以把guizhou.json文件改为guizhou.js文件，并在里面用一个guizhou常量来引入的）
echarts.registerMap('guizhou', guizhou);
//如果当前支持模块化导入方式的话可以直接导入xxxx.json文件，就不用向上面改成js文件后用常量来引入
//echarts.registerMap('guizhou', require('./js/guizhou.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: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
textStyle: {
color: 'white',
fontSize: 12
},
padding: [0, 8],
hideDelay: 10, //浮层隐藏的延迟
formatter: (o) => (o.data) ? `<section class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',
// backgroundColor: 'green', //提示框浮层的背景颜色。
// borderColor: "white", //图形的描边颜色
// borderWidth: 2,
alwaysShowContent: true,
transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
},
//地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
geo: {
show: true,
map: 'guizhou',
roam: false,
top: 90,
left: 292,
zoom: 1.02,
aspectScale: 0.9,
itemStyle: {
normal: {
opacity: 1, //图形透明度 0 - 1
borderColor: "yellow", //图形的描边颜色
borderWidth: 2, //描边线宽。为 0 时无描边。
borderType: 'solid', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
areaColor: "yellow", //图形的颜色 #eee
}
}
},
//系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
series: [{
name: '贵州省遵义市',
map: 'guizhou',
type: "scatter",
coordinateSystem: "geo",
symbolSize: 0,
silent: 'none',
data: guizhouData.map(item => {
return {
name: item.name,
value: [item.lng, item.lat]
};
})
},
{
map: 'guizhou',
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: "#00ff00", //图形的描边颜色
borderWidth: 2, //描边线宽。为 0 时无描边。
borderType: 'solid', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
areaColor: "rgba(0, 186, 0, 0.8)", //图形的颜色 #eee
shadowBlur: 100, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: '#002900', //阴影色
shadowOffsetX: 20, //X轴阴影
shadowOffsetY: -20, //Y轴阴影
label: {
show: true,
textStyle: {
color: "white",
fontSize: 14
}
}
},
//鼠标移入时
emphasis: {
borderColor: "#005b89",
borderWidth: "1",
areaColor: "yellow",
label: {
show: false,
textStyle: {
color: "purple",
fontSize: 14
}
}
},
effect: {
show: true,
shadowBlur: 10,
loop: true
},
},
//自定义图片数组对象[{}, {}...]
}, ...guizhouData.map((item, index) => {
return {
type: "scatter",
coordinateSystem: "geo",
//自定义图片的 位置（lng, lat）
data: [{ name: item.name, value: [item.lng, item.lat] }],
//自定义图片的 大小
symbolSize: [80, 60],
//自定义图片的 路径
symbol: `image://img/icon/icon (${index}).png`
}
})
]
});
//自动切换
const autoShow = (length) => {
nows = (nows + 1) % length;
oMap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: nows
});
};
//每隔5秒钟自动切换到下一个数据点
autoShow(guizhouData.length);
clearInterval(timer);
timer = window.setInterval(() => {
autoShow(guizhouData.length);
}, 5000);
// 点击事件
oMap.on('click', function (res) {
console.log(res);
if('scatter' === res.componentSubType){
alert(`点击了 ${res.name} 图标`);
}
if('map' === res.componentSubType){
alert(`点击了 ${res.name} 地图`);
}
});
</script>
</body>
</html>