首先搭建好SSM环境
此处不是重点,如果不会请自行百度查阅资料。
domain层
public class User {
private int id;
private String name;
private int age;
private int id;
private String name;
private int age;
#省略getter/setter
}
dao层
public List<Map<String, Object>> queryForList();
service层
public List<Map<String, Object>> queryForList() {
return userDao.queryForList();
}
controller层
@Controller
public class EchartsController {
@Autowired
private UserService userService;
@GetMapping("/toBar")
public String toBar(HttpServletRequest request, Model model) {
return "echarts/myecharts";
}
@RequestMapping("/queryForList")
@ResponseBody
public List<Map<String, Object>> queryForList() {
List<Map<String, Object>> lists = userService.queryForList();
for (Map<String, Object> map : lists) {
for (String s : map.keySet()) {
System.out.print("age: " + map.get(s) +" ");
}
}
return lists;
}
}
myecharts.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
pageContext.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h3>
<a class="btn btn-primary" href="${path}/">返回首页</a>
</h3>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
$(function () {
// 初始化
var myChart = echarts.init($('#main')[0]); // 注意:这里init方法的参数的javascript对象,使用jQuery获取标签时,要将jQuery对象转成JavaScript对象;
// 配置图标参数
var options = {
title: {
text: '姓名和年龄关系图之柱状图',
show: true, // 是否显示标题
subtext: '测试数据',
textStyle: {
fontSize: 18 // 标题文字大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['年龄']
},
// X轴
xAxis: {
data: [] // 异步请求时,这里要置空
},
// Y轴
yAxis: {},
series: [{
name: '年龄',
type: 'bar', // 设置图表类型为柱状图
data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
}]
};
// 给图标设置配置的参数
myChart.setOption(options);
myChart.showLoading(); // 显示加载动画
// 异步请求加载数据
$.ajax({
url: '${pageContext.request.contextPath}/queryForList',
type: 'post',
dataType: 'json',
success: function (data) {
var names = [];
var ages = [];
$.each(data, function (index, obj) {
names.push(obj.name);
ages.push(obj.age);
})
myChart.hideLoading(); // 隐藏加载动画
myChart.setOption({
legend: {
data: ['年龄']
},
xAxis: {
data: names
},
series: [{
name: '年龄',
type: 'bar', // 设置图表类型为柱状图
data: ages // 设置纵坐标的刻度
}]
});
}
});
});
</script>
<!-- 饼状图容器 -->
<div id="pid-div" style="width:600px; height:400px;"></div>
<script type="text/javascript">
$(function () {
var myChart = echarts.init($('#pid-div')[0]);
var option = {
title: {
text: '姓名和年龄关系图之饼图',
subtext: '测试数据',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%', // 饼状图的大小
center: ['50%', '60%'], // 饼状图的位置
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
myChart.showLoading(); // 显示动画
$.ajax({
url: '${pageContext.request.contextPath}/queryForList',
type: 'post',
dataType: 'json',
success: function (data) {
var names = [];
var ages = [];
$.each(data, function (index, obj) {
names.push(obj.name);
ages.push({name: obj.name, value: obj.age});
})
myChart.hideLoading(); // 隐藏加载动画
myChart.setOption({
legend: {
data: names
},
series: [{
name: '年龄',
type: 'pie', // 设置图表类型为柱状图
data: ages // 设置纵坐标的刻度
}]
});
}
});
});
</script>
</body>
</html>