ECharts 实现地图散点图(下)
小红
-06-13
上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图，这篇中，我们将讲解如何在百度地图上绘制散点图。
一、初始准备
首先要创建 html 和引入 ECharts 包，具体说明详见上篇：[ECharts 实现地图散点图(一)](//04/28/echarts-map-tutorial.html)。
二、引入echarts百度地图扩展包
在 github 上下载 ECharts 扩展 bmap.js，放在 /extension/ 目录下，并引入 html 中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ECharts map Demo
三、绘制地图
1.在 js 中，新建 ECharts 示例，并为其设置配置项 option：
1
2
3
4
5
6
7var bmapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
// 这里是 ECharts 的配置项，接下来会说明
}
bmapChart.setOption(option);
2.添加百度地图：
在 option 中添加 bmap 相关设置：
1
2
3
4
5
6
7
8var option = {
bmap: {
center: [116.307698, 40.056975], // 中心位置坐标
zoom: 5, // 地图缩放比例
roam: true // 开启用户缩放
}
}
ECharts 将百度地图部分配置集成在了 bmap 中，包括：
参数
说明
格式
center
中心点的百度坐标
坐标数组, 如：[116.307698, 40.056975]
zoom
初始缩放比
number
roam
是否允许用户缩放操作
boolean
mapStyle
地图自定义样式
object, 如：{ styleJson: [...] }
这样百度地图就加载到页面中了，这里显示百度地图的默认样式，稍后第四部分将为百度地图添加自定义样式的配置：
百度地图1
四、绘制散点图
绘制散点图的方法与上篇中绘制散点图方法相同，需要修改的部分是，将散点图的坐标系 coordinateSystem 改成使用 bmap
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
37var myData = [
{name: '海门', value: [121.15, 31.89, 90]},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
{name: '招远', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]},
...
]
var option = {
bmap: {
...
},
visualMap: {// 视觉映射组件
type: 'continuous',
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#50a3ba','#eac736','#d94e5d']
},
textStyle: {
color: '#fff'
}
}
series: [
{
name: '销量',
type: 'scatter',
coordinateSystem: 'bmap', // 坐标系使用bmap
data: myData
}
]
}
绘制散点后的百度地图：
百度地图2
四、 自定义百度地图样式
地图的样式配置 bmap.mapStyle 中 styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中 定制个性地图 章节的介绍。
这里我们设置一个较暗色调的地图,如下：
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
66var option = {
bmap: {
center: [116.307698, 40.056975],
zoom: 5,
roam: true, // 允许缩放
mapStyle: { // 百度地图自定义样式
styleJson: [
// 陆地
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#073763"
}
},
// 水系
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#073763",
"lightness": -54
}
},
// 国道与高速
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"color": "#45818e"
}
},
// 边界线
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#ffffff",
"lightness": -62,
"visibility": "on"
}
},
// 行政标注
{
"featureType": "label",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff",
"visibility": "on"
}
},
{
"featureType": "label",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#444444",
"visibility": "on"
}
}
]
}
},
...
}
实现效果如下图：
百度地图3
除了上述四个配置，其他地图设置都可以通过 百度地图提供的API 实现
获取百度地图实例的方法如下：
1var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地图实例
例如，我们可以为地图添加一个缩放控件和一个比例尺：
1
2bmap.addControl(new BMap.NavigationControl()); // 缩放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺
百度地图4
