ECharts 散点图+百度地图（案例转载）

时间 2020-05-31

标签 echarts 散点图百度地图案例转载繁體版

原文原文链接

转载来源：https://efe.baidu.com/blog/echarts-map-tutorial-2/php

ECharts 实现地图散点图（下）

小红 2016-06-13 ECharts, 教程, 地图

上一篇咱们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图，这篇中，咱们将讲解如何在百度地图上绘制散点图。html

1、初始准备

首先要建立 html 和引入 ECharts 包，具体说明详见上篇：[ECharts 实现地图散点图（一）](/2016/04/28/echarts-map-tutorial.html)。git

2、引入echarts百度地图扩展包

在 github 上下载 ECharts 扩展 bmap.js，放在 /extension/ 目录下，并引入 html 中：github

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
 <div id="map-wrap" style="height: 500px;">
 <!-- 这里之后是地图 -->
 </div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/extension/bmap.js"></script>

</html>

3、绘制地图

1.在 js 中，新建 ECharts 示例，并为其设置配置项 option：数组

var bmapChart = echarts.init(document.getElementById('map-wrap'));

var option = {
 // 这里是 ECharts 的配置项，接下来会说明
}

bmapChart.setOption(option);

2.添加百度地图：echarts

在 option 中添加 bmap 相关设置：jsp

var option = {
 bmap: {
 center: [116.307698, 40.056975], // 中心位置坐标
 zoom: 5, // 地图缩放比例
 roam: true // 开启用户缩放
 }

}

ECharts 将百度地图部分配置集成在了 bmap 中，包括：ide

参数	说明	格式
center	中心点的百度坐标	坐标数组, 如：[116.307698, 40.056975]
zoom	初始缩放比	number
roam	是否容许用户缩放操做	boolean
mapStyle	地图自定义样式	object, 如：{ styleJson: [...] }

这样百度地图就加载到页面中了，这里显示百度地图的默认样式，稍后第四部分将为百度地图添加自定义样式的配置：ui

百度地图1spa

4、绘制散点图

绘制散点图的方法与上篇中绘制散点图方法相同，须要修改的部分是，将散点图的坐标系 coordinateSystem 改为使用 bmap

var 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

4、自定义百度地图样式

地图的样式配置 bmap.mapStyle 中 styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中定制个性地图章节的介绍。

这里咱们设置一个较暗色调的地图,以下：

var 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 实现

获取百度地图实例的方法以下：

var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地图实例

例如，咱们能够为地图添加一个缩放控件和一个比例尺：

bmap.addControl(new BMap.NavigationControl()); // 缩放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺

百度地图4