背景：初用echarts看官网的实例，可能对初学者有难度，整理下，来个简单的打点实例。
//页面上给echarts一个容器
var myChart0 = echarts.init(document.getElementById('map'));
var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息'青岛':[119.84348,35.819467,'青岛'，12],
'即墨市人民政府':[20.453685,36.395272,'即墨市人民政府',11],
'市委政府':[120.19013,36.073168,'市委政府',11],
'青岛大学':[120.429622,36.377366,'青岛大学',11],
'青岛北站':[120.380868,36.175683,'青岛北站',11],
'火车站':[120.409743,36.065352,'火车站',11],
'崂山':[120.633966,36.197331,'崂山',11],
'城阳区政府':[120.402787,36.313572,'城阳区政府',11],
'快船客运中心': [120.322429,36.07961,'快船客运中心',11],
'青岛国际机场': [120.390628,36.273579,'青岛国际机场',11],
'胶州站': [120.00486,36.305696,'胶州站',11],
'青岛站': [120.319626,36.070333,'青岛站',11],
'莱西站': [120.523721,36.817047,'莱西站',11],
'平度火车站': [119.892033,36.769939,'平度火车站',11],
'莱西市政府': [120.52329,36.895417,'莱西市政府',11]
};
//下边就是个普通的函数编程了，直接赋给变量。
var convertData = function(data) {
var res = [];
for (a in data) {
res.push({
name:a,value:data[a]
});
}
return res;
};
option0 = {
title:{
text: '打点',
x: '30%',
y:'0%',
textStyle:{
color: '#fff',
fontFamily: 'Microsoft YaHei'
}
},
backgroundColor: '',
tooltip : {
padding : 10,
backgroundColor : '#222',
borderColor : '#777',
borderWidth : 1,
//formatter有字符串模板，跟回调函数，这里的obj就是下边series.data里的数据。
formatter : function(obj) { //var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3);'
+'font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ '地点：'+ value[2]
+ '<br>'
+ '人数：'
+ value[3]
+ '<br>';
}
},
geo: {
map: 'qingdao', //青岛的地图要准备好
label: {
emphasis: {
show: false
}
},
zoom:1.1,
left:'33%',
roam: false,
itemStyle: { //地图颜色
normal: {
areaColor: '#5fc9f8',
borderColor: '#9be4ff'
},
emphasis: {
areaColor: '#43b9f6'
}
}
},
series : [
{
name: '重点人员监控',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap),
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: { //打点的颜色
normal: {
color: '#fecb2e',
shadowBlur: 10,
shadowColor: '#0d5ebd'
}
},
zlevel: 1
}
]
};
myChart0.setOption(option0);
$(window).resize(function() {
myChart0.resize();
});
看下效果
个人观点,欢迎指正
本人原创,未经允许,禁止转载