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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts plugin to support AMap</title>
</head>
<style media="screen">
html,body,#map {
margin:0;
padding: 0;
height: 100%;
}
</style>
<body>
<div id="map"></div>
<!--引入高德地图JSAPI -->
<script src="http://webapi.amap.com/maps?v=1.3&key=ab99f68b8f9eac7a5287f4043493e2db&plugin=AMap.CustomLayer"></script>
<!--引入UI组件库（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
<script src="echarts-amap.js"></script>
<script type="text/javascript">
var echart = echarts.init(document.getElementById('map'))
echart.setOption({
amap: {
center: [116.397475,39.908695],
zoom: 5,
resizeEnable: true,
lang: 'zh_en'
},
series: [{
type: 'effectScatter',
coordinateSystem: 'amap',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 20,
itemStyle: {
normal: {
color: '#f44336'
}
},
data: [{
name: '首都',
value: [116.397475,39.908695]
}]
}]
})
var map = echart.getModel().getComponent('amap').getAMap();
var layer = echart.getModel().getComponent('amap').getLayer();
//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
//缩放控件
map.addControl(new BasicControl.Zoom({
position: 'lt', //left top，左上角
showZoomNum: false //显示zoom值
}));
});
layer.setzIndex(200)
</script>
</body>
</html>