老规矩，我们先放我们要达到的目标；
Paste_Image.png
在开始绘制地图的时候，我本以后会和绘制，柱状图差不多，后来发现完全不是，它更难，更复杂，我这里讲一步一步的讲解怎么绘制以后上图的图。
这个图 是 安徽合肥的地图，我们怎么获取这张地图呢？
1.下载地图
Paste_Image.png
我们打开官网根据红色箭头，进行点击 地图构建
Paste_Image.png
按照上图进行创建即可
Paste_Image.png
然后点击生成，在左下角发现“合肥市.js”，代表我们已经下载到了我们需要的js文件了；
老规矩，进入一波
Paste_Image.png
这个代码在 文章里面有。
接下来介绍js:
//初始化
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
color: ['red'],
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['lightskyblue','gray', 'orangered','yellow']
}
},
geo: {
map: 'hefei',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: "蜀山区",
symbol: 'circle',
value: [
117.4007434375,31.7372341132813,2000
]
}]
}
]
});
visualMap主要是控制：
Paste_Image.png
geo：就是引入地图
其他的参数和前面差不多，这里主要介绍下data数据格式的要求，
由于我们采用的是geo,类似把地图当作背景，我们在series中， 设置了coordinateSystem: 'geo',，这个主要表示我们用地理坐标显示数据，因此，我们在data的value中，前面两个数据就是表示地理坐标。
在官网在很多是采用数据转换的方法，不易让人明白，而且数据很多让人看着头晕，我在这里精简了一下，让大家好理解一点。
//通过这个函数转换我们要的数据
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;
};
//我们之定义一个我们要的数据
var geoCoordMap = {
"蜀山区":[117.4007434375, 31.7372341132813]
};
Paste_Image.png
然后我们把这里面data修改成
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([name: "蜀山区", value: 2000])
}
]
这样子写，与上面的样子是一个效果，如果还是不能理解，可以打印log看下就明白了。
这样子我们的图就完成啦。。。。。。
