代码:
1.SSM框架先编写人员的数据接口:
package com.ytdx.entity;
import java.io.Serializable;
public class UserByAddress implements Serializable {
private String address;
private Integer num;
public UserByAddress(String address, Integer num) {
super();
this.address = address;
this.num = num;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public Integer getNum() {
return num;
}
public void setNum(Integer num) {
this.num = num;
}
}@RequestMapping(value="/UserAddress")
public void UserAddress(HttpServletResponse response) {
ListObject listObject = new ListObject();
List<UserByAddress> list = new ArrayList<UserByAddress>(); //后台传数据,可以改成数据库查询的方式
list.add(new UserByAddress("北京",1));list.add(new UserByAddress("天津",0));
list.add(new UserByAddress("上海",2));list.add(new UserByAddress("重庆",2));
list.add(new UserByAddress("河北",0));list.add(new UserByAddress("河南",3));
list.add(new UserByAddress("云南",0));list.add(new UserByAddress("辽宁",0));
list.add(new UserByAddress("黑龙江",0));list.add(new UserByAddress("湖南",3));
list.add(new UserByAddress("安徽",2));list.add(new UserByAddress("山东",8));
list.add(new UserByAddress("新疆",4));list.add(new UserByAddress("江苏",2));
list.add(new UserByAddress("江苏",2));list.add(new UserByAddress("浙江",3));
list.add(new UserByAddress("江西",5));list.add(new UserByAddress("湖北",0));
list.add(new UserByAddress("广西",0));list.add(new UserByAddress("甘肃",0));
list.add(new UserByAddress("山西",0));list.add(new UserByAddress("内蒙古",0));
list.add(new UserByAddress("陕西",0));list.add(new UserByAddress("吉林",3));
list.add(new UserByAddress("福建",3));list.add(new UserByAddress("贵州",5));
list.add(new UserByAddress("广东",1));list.add(new UserByAddress("青海",0));
list.add(new UserByAddress("西藏",0));list.add(new UserByAddress("四川",4));
list.add(new UserByAddress("宁夏",3));list.add(new UserByAddress("海南",6));
list.add(new UserByAddress("台湾",0));list.add(new UserByAddress("香港",0));
list.add(new UserByAddress("澳门",0));
listObject.setItems(list);
listObject.setCode(StatusCode.CODE_SUCCESS);
listObject.setMsg("成功");
ResponseUtils.renderJson(response, JsonUtils.toJson(listObject));
}{
"code": "success",
"msg": "成功",
"time": 1524892457124,
"items": [{
"address": "北京",
"num": 1
}, {
"address": "天津",
"num": 0
}, {
"address": "上海",
"num": 2
}, {
"address": "重庆",
"num": 2
}, {
"address": "河北",
"num": 0
}, {
"address": "河南",
"num": 3
}, {
"address": "云南",
"num": 0
}, {
"address": "辽宁",
"num": 0
}, {
"address": "黑龙江",
"num": 0
}, {
"address": "湖南",
"num": 3
}, {
"address": "安徽",
"num": 2
}, {
"address": "山东",
"num": 8
}, {
"address": "新疆",
"num": 4
}, {
"address": "江苏",
"num": 2
}, {
"address": "江苏",
"num": 2
}, {
"address": "浙江",
"num": 3
}, {
"address": "江西",
"num": 5
}, {
"address": "湖北",
"num": 0
}, {
"address": "广西",
"num": 0
}, {
"address": "甘肃",
"num": 0
}, {
"address": "山西",
"num": 0
}, {
"address": "内蒙古",
"num": 0
}, {
"address": "陕西",
"num": 0
}, {
"address": "吉林",
"num": 3
}, {
"address": "福建",
"num": 3
}, {
"address": "贵州",
"num": 5
}, {
"address": "广东",
"num": 1
}, {
"address": "青海",
"num": 0
}, {
"address": "西藏",
"num": 0
}, {
"address": "四川",
"num": 4
}, {
"address": "宁夏",
"num": 3
}, {
"address": "海南",
"num": 6
}, {
"address": "台湾",
"num": 0
}, {
"address": "香港",
"num": 0
}, {
"address": "澳门",
"num": 0
}]
}2.初始化Echarts的js方法,Ajax get请求http://localhost:8080/SnsSystem/UserAddress接口获取数据,并赋值给定义好的数据,将数据传入缺失数据的data里
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户家庭所在地统计</title>
<script src="js/jquery-3.0.0.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
</head>
<body>
<div id="main" style="width: 1000px; height: 600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text : "用户家庭所在地统计",
x : 'center'
},
tooltip : { //tooltip提示框，鼠标悬浮交互时的信息提示
trigger : 'item'
},
legend : { //legend图例
orient : 'vertical', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
x : 'left',
data : []
},
dataRange : { //dataRange值域选择
min : 0,
max : 15,
x : 'left',
y : 'bottom',
text : [ '高', '低' ],
calculable : true
//是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
roamController : {
show : true,
x : 'right',
mapTypeControl : {
'china' : true
}
},
series : [
{
name : '用户所在地人数',
type : 'map',
mapType : 'china',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : []
} ]
};
myChart.showLoading();
var Address = [];
var nums = [];
$.ajax({
type : "get",
async : true,
url : "${pageContext.request.contextPath }/UserAddress",
dataType : "json",
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data.code == 'success') {
$.each(data.items, function(k, v) { //遍历返回的JSON数据
Address.push(v.address);
nums.push({
name : v.address,
value : v.num
});
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
legend : {
data : Address
},
series : [ {
data : nums
} ]
});
}else{
alert("没有用户数据!");
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html> @RequestMapping(value="/UserAddressTj")
public ModelAndView UserAddressTj(ModelAndView mv) {
mv.setViewName("/admin/UserBuAddress");
return mv;
}