本章我们就来试试从后台取数，生成动态的折线图
所有注释都有，如果这个你都看不懂那只能说你不适合干这一行了
做成的结果如下
第一步，我们还是先写前端，还是在上章的HTML修改一些就可以了，废话就不多说了，直接贴代码，注释这些我都写好了的
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div id="main" style="width: 600px; height: 400px;"></div>
<script th:src="@{/js/jquery.min.js}"></script><!-- 引入你自己的jquery -->
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script><!-- 这个你没有直接就删掉 -->
<script th:src="@{/js/plugins/echarts.js}"></script><!-- 引入echarts，路径你自己的，别看我的 -->
<script th:inline="javascript">
// 基于准备好的dom，初始化echarts实例
var prefix = "/monitor/operlog"
//初始化
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title : {
text : 'ECharts'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '销量',
type : 'line',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
data : []
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : prefix + "/discount1", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '销量',
data : nums
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>第二步、写一个实体类，等下要装数进去，实现有参、无参构造方法，还有get、set方法
public class Product{
private String name; //类别名称
private Integer num; //销量
public Product(String name, Integer num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getNum() {
return num;
}
public void setNum(Integer num) {
this.num = num;
}
public Product() {
super();
// TODO Auto-generated constructor stub
}
}
第三步、写Controller，实现后台响应
@PostMapping("/discount1")
public void selectDiscountChart1(OperLog operLog, Model model,HttpServletRequest request, HttpServletResponse response) throws IOException {
//查询数据
List<Product> list = operLogService.selectDiscountChart(operLog);
//提供java-json相互转换功能的类
ObjectMapper mapper = new ObjectMapper();
//将list中的对象转换为Json格式的数组
String json = mapper.writeValueAsString(list);
System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}