老規矩，我們先放我們要達到的目標；
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看下就明白了。
這樣子我們的圖就完成啦。。。。。。
