下面是echats作地圖數(shù)據(jù)可視化的一些簡單的例子，需要更多的功能，可以自己在配置中添加。
1、根據(jù)人數(shù)分布的密度圖
下面直接放demo:
<html>
<head>
<link rel='icon' href='w.ico' type='image/x-icon'>
<title>廣東地圖</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="echarts.min.js"></script>
<script src="guangdong.js"></script>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map-wrap" style="height: 500px;">
</body>
<script>
//地理坐標(biāo)圖
var geoCoordMap = {
'珠海市': [113.353986,21.924979]
,'廣州市':[113.480637,23.125178]
,'湛江市':[110.264977,21.274898]
,'茂名市':[110.919229,21.659751]
,'陽江市':[111.825107,21.859222]
,'云浮市':[112.044439,22.629801]
,'肇慶市':[112.472529,23.051546]
,'江門市':[112.894942,22.090431]
,'中山市':[113.382391,22.321113]
,'佛山市':[113.022717,22.828762]
,'清遠(yuǎn)市':[113.051227,23.685022]
,'韶關(guān)市':[113.591544,24.501322]
,'河源市':[114.897802,23.746266]
,'梅州市':[116.117582,24.099112]
,'潮州市':[116.692301,23.661701]
,'揭陽市':[116.255733,23.143778]
,'汕頭市':[116.708463,22.87102]
,'汕尾市':[115.364238,22.774485]
,'深圳市':[114.085947,22.347]
,'東莞市':[113.746262,22.746237]
,'惠州市':[114.412599,23.079404]
};
var mydata = [
{name: '珠海市',value:250973},
{name: '廣州市',value: 453088},
{name: '中山市',value:424302},
{name: '佛山市',value: 1135329},
{name: '揭陽市',value:30035},
{name: '梅州市',value: 47148},
{name: '汕頭市',value:65920},
{name: '東莞市',value: 428881},
{name: '惠州市',value:300025},
{name: '汕尾市',value: 20154},
{name: '江門市',value: 231140},
{name: '清遠(yuǎn)市',value: 136351},
{name: '肇慶市',value: 126912},
{name: '河源市',value: 37704},
{name: '韶關(guān)市',value: 44550},
{name: '云浮市',value: 31672},
{name: '潮州市',value: 26802},
{name: '陽江市',value: 3114},
{name: '茂名市',value: 39238},
{name: '湛江市',value: 48422},
];
// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
title:{
text:'廣東省各地市開機(jī)用戶數(shù)分布圖',
x:'center',
},
tooltip:{
trigger:'item'
},
series: [{
name: '點播量', // series名稱
type: 'map', // series圖表類型
map: '廣東',
coordinateSystem: 'geo', // series坐標(biāo)系類型
data:mydata // series數(shù)據(jù)內(nèi)容
}],
visualMap: {
min: 3000,
max: 1150000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默認(rèn)為數(shù)值文本
realtime: false,
calculable: true,
inRange:{
color: ['lightskyblue', 'yellow', 'orangered']
}
}
};
mapChart.setOption(option);
</script>
</html>
效果圖：
image.png
2、在地圖上作散點圖
<!DOCTYPE html>
<html>
<head>
<link rel='icon' href='w.ico' type='image/x-icon'>
<title>廣東地圖</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="echarts.min.js"></script>
<script src="guangdong.js"></script>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map-wrap" style="height: 800px;">
</body>
<script>
//地理坐標(biāo)圖
var geoCoordMap = {
'珠海市': [113.353986,21.924979]
,'廣州市':[113.480637,23.125178]
,'湛江市':[110.264977,21.274898]
,'茂名市':[110.919229,21.659751]
,'陽江市':[111.825107,21.859222]
,'云浮市':[112.044439,22.629801]
,'肇慶市':[112.472529,23.051546]
,'江門市':[112.894942,22.090431]
,'中山市':[113.382391,22.321113]
,'佛山市':[113.022717,22.828762]
,'清遠(yuǎn)市':[113.051227,23.685022]
,'韶關(guān)市':[113.591544,24.501322]
,'河源市':[114.897802,23.746266]
,'梅州市':[116.117582,24.099112]
,'潮州市':[116.692301,23.661701]
,'揭陽市':[116.255733,23.143778]
,'汕頭市':[116.708463,22.87102]
,'汕尾市':[115.364238,22.774485]
,'深圳市':[114.085947,22.347]
,'東莞市':[113.746262,22.746237]
,'惠州市':[114.412599,23.079404]
};
var mydata = [
{name: '珠海市',value:250973},
{name: '廣州市',value: 453088},
{name: '中山市',value:424302},
{name: '佛山市',value: 1135329},
{name: '揭陽市',value:30035},
{name: '梅州市',value: 47148},
{name: '汕頭市',value:65920},
{name: '東莞市',value: 428881},
{name: '惠州市',value:300025},
{name: '汕尾市',value: 20154},
{name: '江門市',value: 231140}
//{name: '清遠(yuǎn)市',value: 136351},
//{name: '肇慶市',value: 126912},
//{name: '河源市',value: 37704},
//{name: '韶關(guān)市',value: 44550},
//{name: '云浮市',value: 31672},
//{name: '潮州市',value: 26802},
//{name: '陽江市',value: 3114},
//{name: '茂名市',value: 39238},
//{name: '湛江市',value: 48422},
];
//處理series數(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;
};
// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
title:{
text:'廣東省各地市開機(jī)用戶數(shù)分布圖',
x:'center',
},
tooltip:{
trigger:'item'
},
geo: {
show:true,
map: '廣東',
type:'map',
roam:true, //是否開啟鼠標(biāo)縮放和平移漫游
itemStyle:{ // 定義樣式
normal: {
areaColor: '#cdcdcd',
borderColor: '#111'
},
},
emphasis: { // 高亮狀態(tài)下的樣式
areaColor: '#2a333d'
}
label:{
normal: {
show: true, //顯示省份名稱
}
}
},
backgroundColor: #0f375f', // 圖表背景色
series: [{
name: '點播量', // series名稱
type: 'scatter', // series圖表類型,.這里為散點
coordinateSystem: 'geo', // series坐標(biāo)系類型
data:convertData(mydata) // series數(shù)據(jù)內(nèi)容
}],
};
mapChart.setOption(option);
</script>
</html>
image.png
在這里series的數(shù)據(jù)格式為：
{name:'廣州',value:[113.480637,23.125178,453088]}
所以要對數(shù)據(jù)進(jìn)行一定的處理。
