geo组件
geo组件是 ECharts 图表的地理坐标系组件。可以用于地图的绘制，它支持在地理坐标系上绘制散点图，线集。
geo组件是根据地图坐标来绘制图形的，geo组件大都适用于自定义地图的绘制。
echarts.registerMap('jiangsu', data) // data坐标数据
options = {
geo: [
{
// 使用自定义地图
map: 'jiangsu',
}
]
}
通过上面两行代码就可以绘制一个地图了，如下图：
还有另一种方法也可以画图，那就是series:
series: [ { type: 'map', mapType: 'jiangsu', } ]
使用的时候，可以即写geo组件，也可以配置series。那么就会绘制两个地图，只不过重叠在一起，效果上看起来只有一个地图，如果把各自的zoom属性设置不一样，那么就会看到两个地图：
如果想要某些特殊的效果，同时写两个配置可以画出比单个配置更好的地图出来。比如：作出好看的阴影效果。如果都设置，那么效果如下：
如果只设置series，那么效果如下：感觉对每一个小块都进行阴影的效果
两者的区别是在series中可以添加data，然后data就可以使用visualMap的展示。这也是与geo组件最大的区别。
visualMap: {
// 颜色标尺是否展示
show: true,
// 设置最大值
max: 100,
// 对应series第几个图
seriesIndex: [0],
// 颜色范围
inRange: {
color: ['#a5dcf4', '#006edd']
}
},
series: [
data: Object.keys(center).map(item => {
return {
name: item,
// 假设为人口数，单位：百万
value: Math.random() * 100
}
})
]
在地图上加其他图形
首先需要明白在地图上加任何东西，其实都是绘制一个图，那么必然在series里面添加。比如现在要添加三个三个气泡图，那么就需要有三个气泡图的相关配置：
{
type: 'effectScatter',
data: [
{
city: '南京市',
value: [118.767413, 32.041544]
}
],
coordinateSystem: 'geo',
// 设置散点图的大小
symbolSize: 16,
itemStyle: {
color: '#feae21'
},
label: {
normal: {
show: true,
position: 'top',
formatter: function(params) {
// 通过\n的方式来换行
return `{title|${params.data.city}}\n{content|发生严重事故}`
},
// 设置文本相关的样式
backgroundColor: 'rgba(254, 174, 33, .8)',
padding: [0, 0],
borderRadius: 3,
lineHeight: 32,
color: '#f7fafb',
// 提供了一个rich属性，相当于利用富文本来编辑label，rich里面主要是提供class的样式，然后应用到formatter中
rich: {
title: {
padding: [10, 10, 5, 10],
color: '#fff'
},
content: {
padding: [0, 10, 10, 10],
color: '#fff'
}
}
},
emphasis: {}
}
},
这里需要注意，我们在里面设置了data，data是一个一维数组，根据数据集的默认规则，第一列作为x轴的数据，第二列开始作为y轴的数据。所以散点图就默认对应数组的第二列，即value属性。同时，我们可以根据value的大小，来设置散点图的大小，这样就有个区分度。
symbolSize: function(val) {
return val[2] / 10
},
echart的地图扩展
在有些场景下，我们可以不用自定义一个地图，直接使用世界地图，那么就可以使用一个echart的地图扩展。下面以vue场景下来演示：
- 引入扩展
import 'echarts/extension/bmap/bmap'
相当于已经有了一个世界地图
- 定义地图展示的中心点 设置在bmap这个对象当中
option: {
bmap: {
center: [104.114129, 37.550339],
// 比例尺
zoom: 5,
// 是否启用滚轮缩放
roam: false
},
}
- 把坐标系设置为地图模式
coordinateSystem: 'bmap',
