老規(guī)矩，我們先放我們要達(dá)到的目標(biāo)；
在開(kāi)始繪制地圖的時(shí)候，我本以后會(huì)和繪制，柱狀圖差不多，后來(lái)發(fā)現(xiàn)完全不是，它更難，更復(fù)雜，我這里講一步一步的講解怎么繪制以后上圖的圖。
這個(gè)圖 是 安徽合肥的地圖，我們?cè)趺传@取這張地圖呢？
1.下載地圖
我們打開(kāi)官網(wǎng)根據(jù)紅色箭頭，進(jìn)行點(diǎn)擊 地圖構(gòu)建
按照上圖進(jìn)行創(chuàng)建即可
然后點(diǎn)擊生成，在左下角發(fā)現(xiàn)“合肥市.js”，代表我們已經(jīng)下載到了我們需要的js文件了；
老規(guī)矩，進(jìn)入一波
這個(gè)代碼在 文章里面有。
接下來(lái)介紹js:
//初始化
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
color: ['red'],
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默認(rèn)為數(shù)值文本
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: "蜀山區(qū)",
symbol: 'circle',
value: [
117.4007434375,31.7372341132813,2000
]
}]
}
]
});
visualMap主要是控制：
geo：就是引入地圖
其他的參數(shù)和前面差不多，這里主要介紹下data數(shù)據(jù)格式的要求，
由于我們采用的是geo,類似把地圖當(dāng)作背景，我們?cè)趕eries中， 設(shè)置了coordinateSystem: 'geo',，這個(gè)主要表示我們用地理坐標(biāo)顯示數(shù)據(jù)，因此，我們?cè)赿ata的value中，前面兩個(gè)數(shù)據(jù)就是表示地理坐標(biāo)。
在官網(wǎng)在很多是采用數(shù)據(jù)轉(zhuǎn)換的方法，不易讓人明白，而且數(shù)據(jù)很多讓人看著頭暈，我在這里精簡(jiǎn)了一下，讓大家好理解一點(diǎn)。
//通過(guò)這個(gè)函數(shù)轉(zhuǎn)換我們要的數(shù)據(jù)
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;
};
//我們之定義一個(gè)我們要的數(shù)據(jù)
var geoCoordMap = {
"蜀山區(qū)":[117.4007434375, 31.7372341132813]
};
然后我們把這里面data修改成
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([name: "蜀山區(qū)", value: 2000])
}
]
這樣子寫(xiě)，與上面的樣子是一個(gè)效果，如果還是不能理解，可以打印log看下就明白了。
這樣子我們的圖就完成啦。。。。。。
