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' ],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',data : res.slice(0,6),showEffectOn : 'render',rippleEffect : {
						brushType : 'stroke'
					},hoverAnimation : true,show : true
						}
					},itemStyle : {
						normal : {
							color : '#f4e925',shadowBlur : 10,shadowColor : '#333'
						}
					},zlevel : 1
				} ]
			});
		}
	})
})


</script>





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


   

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!