前言
Echarts map地图展示坐标点,并能更具不同的属性值进行区分,展示点数据依赖于Echarts的散点图scatter
、effectScatter
,底图依赖于geo
。
geo
:地理坐标系组件。地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
scatter
:散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 x,y 之间的关系,如果数据项有多个维度,其它维度的值可以通过不同大小的 symbol 展现成气泡图,也可以用颜色来表现。这些可以配合 visualMap 组件完成。
effectScatter
:带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0px;
height: 0px;
}
#map{
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var geoCoordMap = { //这里放你打点的坐标信息,虚拟信息
'莱芜市':[117.678856,36.223361],
'威海市':[122.121804,37.524054],
'滨州市':[117.982412,37.392056],
'临沂市':[118.364156,35.119965],
'淄博市':[118.069799,36.82475],
'日照市':[119.532384,35.425496],
'烟台市':[121.454902,37.480081],
'菏泽市':[115.48038,35.248354],
'青岛市':[120.397057,36.07041],
'东营市':[118.681509,37.447084],
'潍坊市':[119.164438,36.71744],
'济南市':[117.122338,36.661876],
'聊城市':[115.986305,36.465225],
'泰安市':[117.090143,36.212179],
'枣庄市':[117.329308,34.824652],
'济宁市':[116.588817,35.433025]
};
var locValue = [
{name:"莱芜市",value:"100"},
{name:"威海市",value:"50"},
{name:"滨州市",value:"20"},
{name:"临沂市",value:"90"},
{name:"淄博市",value:"170"},
{name:"日照市",value:"190"},
{name:"德州市",value:"160"},
{name:"烟台市",value:"140"},
{name:"菏泽市",value:"130"},
{name:"青岛市",value:"110"},
{name:"东营市",value:"105"},
{name:"潍坊市",value:"142"},
{name:"济南市",value:"80"},
{name:"聊城市",value:"184"},
{name:"泰安市",value:"155"},
{name:"枣庄市",value:"130"},
{name:"济宁市",value:"140"}
];
var convertData = function (geoCoordMap,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;
};
// JSON
$.getJSON('./json/shandong.json', function (data) {
echarts.registerMap('shandong', data);
var chart = echarts.init(document.getElementById('map'));
var option = {
backgroundColor: '#404a59',
title: {
text: '点展示',
x:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
},
extraCssText:"height:20px;"
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: 'shandong',
roam:true,
aspectScale:1,
label: {
emphasis: {
show: true,
color:"#fff"
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'pm2.5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap,locValue).slice(0,4),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap,locValue).slice(4,8),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{ //没有visualMap的情况,同颜色大小标识不同的等级
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap,locValue).slice(8,12),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'pm2.5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap,locValue).slice(12,18),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
]
};
chart.setOption(option);
});
</script>
</body>
</html>