最終地圖實現的效果圖如下

實現步驟

一、jsp頁面

<!--引入js -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>

<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM 餅形圖 -->
<div id="first" style="width:100%;height:100%;"></div>

<script>
$(function(){
$.ajax({
		type : "get",
		url : rootPath + "/userLocation/getLocationPictureData.action",
		//dataType:"json",
		cache : false,
		async : false,
		success : function(result) {
			var res = [];
			console.log(result)
			for (var i = 0; i < result.length; i++) {
				//獲得每個城市的統計數量
				var count = result[i].createTime
				//獲得經緯度
				var geo = [ result[i].longitude, result[i].latitude ]
				res.push({
					name : result[i].cityName,
					//兩個字串拼接
					value : geo.concat(count),
				});
			}
			// 基於準備好的dom，初始化echarts例項
			var myChart = echarts.init(document.getElementById('first'));
			//var option = {
			myChart.setOption({
				backgroundColor : '#404a59',
				title : {
					text : '全國使用者地理位置分佈圖',
					subtext : 'data from PM25.in',
					sublink : 'http://www.pm25.in',
					left : 'center',
					textStyle : {
						color : '#fff'
					}
				},
				tooltip : {
					trigger : 'item'
				},
				legend : {
					orient : 'vertical',
					y : 'bottom',
					x : 'right',
					data : [ 'pm2.5' ],
					textStyle : {
						color : '#fff'
					}
				},
				geo : {
					map : 'china',
					label : {
						emphasis : {
							show : false
						}
					},
					roam : true,
					itemStyle : {
						normal : {
							areaColor : '#323c48',
							borderColor : '#111'
						},
						emphasis : {
							areaColor : '#2a333d'
						}
					}
				},
				series : [ {
					//name: 'pm2.5',
					type : 'scatter',
					coordinateSystem : 'geo',
					data : res,
					symbolSize : function(val) {
						return val[2] / 10;
					},
					label : {
						normal : {
							formatter : '{b}',
							position : 'right',
							show : false
						},
						emphasis : {
							show : true
						}
					},
					itemStyle : {
						normal : {
							color : '#ddb926'
						}
					}
				}, {
					name : 'Top',
					type : 'effectScatter',
					coordinateSystem : 'geo',
					data : res.slice(0, 6),
					symbolSize : function(val) {
						return val[2] / 10;
					},
					showEffectOn : 'render',
					rippleEffect : {
						brushType : 'stroke'
					},
					hoverAnimation : true,
					label : {
						normal : {
							formatter : '{b}',
							position : 'right',
							show : true
						}
					},
					itemStyle : {
						normal : {
							color : '#f4e925',
							shadowBlur : 10,
							shadowColor : '#333'
						}
					},
					zlevel : 1
				} ]
			});
		}
	})
})


</script>