echarts+百度地图+关系图，使用介绍
前言
- 最近有一个需求：做一个关于全世界专家信息的展示，需要在地图上显示其位置以及互相之间的关系，于是想到了使用echarts来实现这个功能。
一、echarts
1.1 介绍
- ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
1.2 使用简介
- 地址：echarts地址
- 文档：进入网址之后按照下图即可看到官方教程，此处不再做赘述
- 示例：点击示例即可看到各种各样的表格（反正就是花里胡哨的）
- 引用：那么接下来我们应该怎么引用这些花里胡哨的图标呢？请看如下操作
这样我们就可以看到这个代码是如何编写的了。（刚也说了这个option是灵魂人物，所以我们大多数操作对其修改即可） - 本地使用：有时候我们本地开发想要对其js进行修改达到我们预期的结果时这时候我们可以下载他的js文件，然后直接引用即可（如下图）
二、百度地图
- 百度地图提供了可以使用的API，以供开发人员调用：地址
- 注册：点击控制台，没有注册的注册一下
- 创建一个应用
- 创建完成之后能看到一个东西（访问应用（AK））这个后面要用到哦。
- 百度地图操作到此完毕（记得上面的AK哦）
三、Echarts+baiduMap
- 上面的东西都准备好之后我们就可以使用百度地图了
- 需要引用三个东西（echarts.min.js、bmap.min.js、ak的引用）话不多说直接上代码。
- 完整代码（除了上面的js引用：自己加上就行了）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div></script>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
};
myChart.setOption(option);
</script>
</body>
</html>
四、Echarts+baiduMap+Graph
4.1 心路历程
- 上面操作已经完美的实现了Echarts与百度地图的结合，下面就是与关系图结合了。
- 首先看了一下Echarts中的示例，并没有百度地图与关系图的示例（感觉很失落），于是只能将就的看一下散点图了
- 按照上面的图下载对应的HTML之后开始分析（注：上面说了echarts的灵魂就是option）
- 可以看出图表中的数据都是从option中的series传入（内部具体的参数代表的意义请自行百度）。
- 该散点图代码显示如下（三个地方需要关注，如下）
- 由此可知地图需要传输的value中需要为一个列表（其中有三个元素），前两个值为坐标，后面一个值为改点对应的值
- 由以上的分析可以得出大概应该怎么处理不同的点如何在地图上显示了，下面就开始着手百度地图跟关系图的结合。
- 选取一个合适的散点图（我这边选取的是悲惨世界人物关系图如下图）
- 分析该图的数据构成
-
点击进去之后查看完整代码，可以发现数据来自于一个网站（如下图）
-
查看该网站的数据（地址：https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/les-miserables.json）
-
我这边是直接把这个数据复制到本地了，方便进行数值修改调整，最终的数据如下（这个是经过简化保存到本地的json数据）
-
{
"nodes": [
{
"id": "0",
"name": "Myriel",
"symbolSize": 19.12381,
"value": [121.15, 31.89, 9],
"category": 0
},
{
"id": "1",
"name": "Napoleon",
"symbolSize": 20,
"value": [118.87, 42.28, 16],
"category": 0
}
],
"categories": [
{
"name": "类目0"
},
{
"name": "类目1"
},
{
"name": "类目2"
},
{
"name": "类目3"
},
{
"name": "类目4"
},
{
"name": "类目5"
},
{
"name": "类目6"
},
{
"name": "类目7"
},
{
"name": "类目8"
}
]
}
4.2 最终代码（这里仅展示前端代码）
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 100%; height: 100%"></div>
<script type="text/javascript" src="/layui/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/layui/jquery.js"></script>
<script type="text/javascript" src="/layui/echarts/extension/bmap.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=这里是ak值"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var graph;
var option;
var option_1;
$.ajax({
type: 'get',
url: '/get_relation_data', //这里是向后端请求数据，获取的上面的json数据
success: function (data) {
graph = data['relation_data']
start();
}
})
function start() {
graph.nodes.forEach(function (node) {
node.label = {
show: node.symbolSize > 30
};
});
option = {
title: {
text: '全国主要城市空气质量 - 百度地图',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center'
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series: [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
coordinateSystem: 'bmap',
// links: graph.links,
categories: graph.categories,
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
}
myChart.setOption(option);
}
myChart.on('click', function (para) {
console.log(para);
})
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
- 效果图如下（看着跟那个散点图差不多，因为我这把关系的链接给删除了，需要的可以自行添加，比较简单这里不做赘述）
- 如果需要对节点进行点击事件的话可以参考如下代码
myChart.on('click', function (para) {
console.log(para); //这里面的para是对应节点所对应的数据
})
五、结局
- 上面就是我制作这个图的前期准备的准备工作，目前基本的功能已经实现，后续的任务关系图的扩展将不在此赘述（信息安全嘛），希望这些能够给广大热爱优快云的人员带来帮助，也希望小小程序员的我能写出越来越好的文章。
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
