下面是echats作地图数据可视化的一些简单的例子，需要更多的功能，可以自己在配置中添加。
1、根据人数分布的密度图
下面直接放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>
//地理坐标图
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]
,'清远市':[113.051227,23.685022]
,'韶关市':[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: '清远市',value: 136351},
{name: '肇庆市',value: 126912},
{name: '河源市',value: 37704},
{name: '韶关市',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:'广东省各地市开机用户数分布图',
x:'center',
},
tooltip:{
trigger:'item'
},
series: [{
name: '点播量', // series名称
type: 'map', // series图表类型
map: '广东',
coordinateSystem: 'geo', // series坐标系类型
data:mydata // series数据内容
}],
visualMap: {
min: 3000,
max: 1150000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
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>
//地理坐标图
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]
,'清远市':[113.051227,23.685022]
,'韶关市':[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: '清远市',value: 136351},
//{name: '肇庆市',value: 126912},
//{name: '河源市',value: 37704},
//{name: '韶关市',value: 44550},
//{name: '云浮市',value: 31672},
//{name: '潮州市',value: 26802},
//{name: '阳江市',value: 3114},
//{name: '茂名市',value: 39238},
//{name: '湛江市',value: 48422},
];
//处理series数据
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:'广东省各地市开机用户数分布图',
x:'center',
},
tooltip:{
trigger:'item'
},
geo: {
show:true,
map: '广东',
type:'map',
roam:true, //是否开启鼠标缩放和平移漫游
itemStyle:{ // 定义样式
normal: {
areaColor: '#cdcdcd',
borderColor: '#111'
},
},
emphasis: { // 高亮状态下的样式
areaColor: '#2a333d'
}
label:{
normal: {
show: true, //显示省份名称
}
}
},
backgroundColor: #0f375f', // 图表背景色
series: [{
name: '点播量', // series名称
type: 'scatter', // series图表类型,.这里为散点
coordinateSystem: 'geo', // series坐标系类型
data:convertData(mydata) // series数据内容
}],
};
mapChart.setOption(option);
</script>
</html>
image.png
在这里series的数据格式为：
{name:'广州',value:[113.480637,23.125178,453088]}
所以要对数据进行一定的处理。
