之前没看过echart的地图，最近有个需求需要绘制到深圳地图，经过几番测试，实现需要的效果，这里写篇博客记录一下，先看效果图:
image.png
需求大概是这样，展示出深圳部分医院在地图上的位置以散点的方式进行展示，并可以显示某些信息。
首先要先把地图绘制出来，因为之前没用过地图，超人鸭也是先从官网的例子看起，经常逛echart官网的伙伴应该对这个例子不陌生:
image.png
这是去往官网例子的链接
每一种地图都会有按区域划分，而这些区域就可以看作一个单位，像上面的美国地图，每个洲就是它的单位，中国的地图就是以每个省作为单位，我最上面的深圳地图就是以每个区作为单位。这些单位地图一开始已经划分好，所以你可以直接赋值给这些单位某个值去展示，就像上面的例子一样，伙伴们如果看不太懂可以好好看看我上面放的官方例子。
回到我遇到的需求，是需要在深圳地图上展示部分医院，而不是去操作地图本身，不是给某个区某个数值，所以这时候地图只是作为一个坐标，供我们去定位，然后需要在上面再绘制一层散点图，官方也有同样的例子:
image.png
这是去往官方例子的链接
好了，看了几遍官网的例子后大概明白如何做了，回到我遇到的需求，我需要先绘制出深圳地图，将它作为坐标系展示。因为echart不再内置地图，所以我们需要手动引入一个地图数据的json文件，我绘制的是深圳地图，这些地图的json文件大家百度找找都是可以免费找到的。
得到地图数据的json文件后，这个json文件里面是一个对象，需要将它引入到我们用的地方，然后将这个对象给到echart注册，那如何将一个本地的json文件引入到我们要用的地方呢?如果你是在node.js服务器的环境下，比如vue脚手架开发，就可以使用require引入这个对象:
const shenzhenJson = require("./shenzhen.json");
但如果不是node环境呢，比如本地的一个html文件，第一想到的是ajax，但这是本地模拟一下，使用ajax还是有点麻烦，这里超人鸭用一种不太规范的方法引入，这是json文件原本的样子:
image.png
我使用一个变量定义这个对象:
image.png
然后在html文件中用script标签引入:
<script src="./shenzhen.json"></script>
这里已经引入成功了，我们可以打印测试一下:
<script>
console.log(shenzhen)
</script>
image.png
是没问题的，现在拿到深圳地图的json数据，接下来就是绘制地图了，还是echart那一套:
<script>
echarts.registerMap("shenzhen", shenzhen); // 注册一个地图，名字叫shenzhen
var myChart = echarts.init(document.getElementById('map')) // 拿到一个实例
option = {
backgroundColor: '#fff',
geo: { // 地理坐标系组件
map: 'shenzhen',
itemStyle: { // 这里的item就是上面说的地图的单位，在深圳地图上就是每个区
normal: {
areaColor: '#e8f6ff',
borderColor: '#4a9dc9'
}
},
emphasis: {
areaColor: '#cddeea'
}
}
}
myChart.setOption(option);
</script>
先看看效果:
image.png
接下来就是往上面绘制散点图，既然是往以这个地图作为坐标系，那显示在上面点的位置就要在这个地图上，我们需要先写好每个地点的经纬度：
var geoCoordMap = {
"龙岗中医院":[114.215683,22.7083],
"龙岗人民医院":[114.227615,22.726227],
"深圳市儿童医院":[114.054398,22.547491],
"深圳市人民医院":[114.128563,22.557564],
"深圳市第二人民医院":[114.116035,22.605417],
"深圳南山人民医院":[113.927406,22.52663],
"深圳市妇幼保健院":[114.048958,22.51841],
"深圳东方医院":[113.873001,22.75885],
"深圳岭南医院":[114.036186,22.52033],
"深圳和平医院":[113.895424,22.570961],
"深圳友谊医院":[114.103729,22.561831],
"深圳市香蜜湖医院":[114.019379,22.537119],
"深圳景田医院":[114.042046,22.549276],
"深圳市急救医疗中心":[113.824593,22.64187]
}
大家百度一下经纬度查询就能找到，然后是散点图的配置，还有一个处理数据的函数:
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
// 散点图的配置:
series: [
{
type: 'scatter', // 散点图类型
coordinateSystem: 'geo', // 使用地理坐标系
data:convertData([
{name: '龙岗中医院',value: [10,20,3]}, // value的值是随便写的，不用理会
{name: '龙岗人民医院',value:[20,30,2]},
{name:'深圳市儿童医院',value:[30,20,3]},
{name:'深圳市第二人民医院',value:[40,50,5]},
{name:'深圳南山人民医院',value:[40,50,5]},
{name:'深圳市妇幼保健院',value:[40,50,5]},
......
]),
symbolSize: 13, // 散点的大小
itemStyle: {
normal:{
color: '#fd9a95' // 散点的颜色
}
}
}
]
上面的处理函数也是从官网改造一点细节复制过来的，处理后的每一项data就是这个样子:
image.png
散点图会根据value的前两项去匹配坐标，在地图上显示，后面的数据并无关系。到这里的效果:
image.png
跟最上面的完成图比较就只剩提示框和提示框里面的内容，这个其实比较简单，都是echart官网配置项而已，下面超人鸭将整个实现绘制的代码贴出来:
<script>
var geoCoordMap = {
"龙岗中医院":[114.215683,22.7083],
"龙岗人民医院":[114.227615,22.726227],
"深圳市儿童医院":[114.054398,22.547491],
"深圳市人民医院":[114.128563,22.557564],
"深圳市第二人民医院":[114.116035,22.605417],
"深圳南山人民医院":[113.927406,22.52663],
"深圳市妇幼保健院":[114.048958,22.51841],
"深圳东方医院":[113.873001,22.75885],
"深圳岭南医院":[114.036186,22.52033],
"深圳和平医院":[113.895424,22.570961],
"深圳友谊医院":[114.103729,22.561831],
"深圳市香蜜湖医院":[114.019379,22.537119],
"深圳景田医院":[114.042046,22.549276],
"深圳市急救医疗中心":[113.824593,22.64187]
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
echarts.registerMap("shenzhen", shenzhen);
var myChart = echarts.init(document.getElementById('map'))
option = {
backgroundColor: '#fff',
title: {
text: '全市医院分布',
},
tooltip: { // 提示框
trigger: 'item',
backgroundColor: '#fffeff',
padding: 8,
textStyle: {
color: '#00a2ff'
},
// 给提示框添加样式
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);text-align:center',
formatter: function (params) { // 格式化提示框的文字，下面使用模板字符串
return `<span style="color:#aaaaaa">${params.name}</span><br />
<div style="font-size:14px;font-weight:700;">
满意度：${params.value[2]}
<br />满意率：${params.value[3]}<br />排名：${params.value[4]}
</div>
`
}
},
geo: {
map: 'shenzhen',
itemStyle: {
normal: {
areaColor: '#e8f6ff',
borderColor: '#4a9dc9'
},
emphasis: {
areaColor: '#cddeea'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data:convertData([
{name: '龙岗中医院',value: [10,20,3]},
{name: '龙岗人民医院',value:[20,30,2]},
{name:'深圳市儿童医院',value:[30,20,3]},
{name:'深圳市第二人民医院',value:[40,50,5]},
......
]),
symbolSize: 13,
itemStyle: {
normal:{
color: '#fd9a95'
}
}
}
]
}
myChart.setOption(option);
</script>
看到我使用了回调函数格式化了提示框显示的内容，这个回调函数带了一个params参数，这个对象里面基本什么信息都有，大家不知道的话打印一下什么都明了。
到这里就实现使用echart散点图绘制地图，超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况，用处还是挺大的，欢迎大家指教哦。
