ajax动态赋值Echarts地图

最终地图实现的效果图如下

实现步骤

一、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>




3.java后台我这里是返回的list 在ajax循环遍历放到组里就好。