基于ajax从后端服务器获取echarts的数据，并且显示在前端的页面上
简培
最近在学习echarts，看到官方给出的入门案例数据都是“写死”的，那么应该如何从后端获取数据并渲染到前端呢？试着写了一个小案例，通过ajax实现的，小白初学，欢迎指正
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ECharts</title>
<!--通过cdn的方式引入echarts和jquery文件-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var names = []; //x轴：物品的名称
var nums = []; //y轴：物品的销量
draw(); //获取后端传来的json对象并绘图
function draw() {
$.ajax({
type: "post",
async: true, //异步请求(默认也是异步)
url: "test", //请求发送到后台controller的地址
dataType: "json", //返回数据形式为json
success: function (results) { //result参数是服务器返回的json对象，这个参数是自带的，名字随便起
if (results != null) {
names.push(results["names"]) //取出Json对象中的值，作为绘图时的data
nums.push(results["nums"]) //这里为了方便只返回了一组数据，如果返回多组循环即可
myChart.setOption({ //绘图
title: {
text: 'echarts从后端获取数据'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: names //从后端传过来的，没有“写死”
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: nums //从后端传过来的，没有“写死”
}
]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
})
}
</script>
</body>
</html>
实体类（Goods）
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Goods { //导入Lombok可以简写
private String names; //物品名称
private int nums; //物品销量
}
controller控制器
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class EchartsController {
@RequestMapping("/test")
@ResponseBody
public Goods echarts(){
Goods goods = new Goods();
goods.setNames("毛衣");
goods.setNums(20);
return goods; //返回一个json对象
}
}
类似资料：