springboot框架下Echart加载数据库生成折线图

[-且随疾风-]

项目结构


HTML界面如下

@layout("/common/_container.html"){
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>走廊人流量统计管理</h5>
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="col-sm-12">


<div id="main" style="height:400px"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
myChart = echarts.init(document.getElementById('main'));

myChart.setOption( {
title : {
text: '走廊人流量',
},
tooltip : {},
legend: {
data:['人流量']
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ["2018/10/1","2018/10/2","2018/10/3","2018/10/4","2018/10/5","2018/10/6"]
}
],
yAxis : {},
series : [
{
"name":"人流量",
"type":"line",
"data":[5, 20, 40, 10, 10, 20],
}
]
});
// 在数据为动态加载之前建筑loading动画
myChart.showLoading();
// 对数据进行重新，变成动态数据
var nums=[];
var dates=[];
$.ajax({
type:"post",
async:true, // 异步请求
url:"/echart/line",
data:{},
dataType:"json",
success:function(result) {
if(result!=null&&result.length>0){
for(var i=0;i<result.length;i++){
nums.push(result[i].num);
}
for(var i=0;i<result.length;i++){
dates.push(result[i].date);
}

// 隐藏加载动画
myChart.hideLoading();
myChart.setOption({
xAxis:{
name:'日期',
data:dates //重写x轴
},
series:[
{
name:'人流量',
data:nums,
color:['#FF3333']
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="${ctxPath}/static/modular/count/count/count.js"></script>
@}

controller代码如下

@RequestMapping(value = "/line",method = RequestMethod.POST)
@ResponseBody()
public String line() throws JsonProcessingException {
List<Result> results = resultService.getResultList();
//List<Result> results = resultService.selectList(null);

ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(results); //将list中的对象转换为Json格式的数组
return json;
}

serviceimp代码
@Autowired
private ResultMapper mapper;

@Override
public List<Result> getResultList() {
return mapper.getResultList();
}

数据库数据加载不出来，哪里存在问题？qq：1184919257，有偿解决问题

[ydr2002]

没有环境运行你的程序。遇到这种问题的解决思路如下： 1， 首先直接在浏览器URL里面输入你的控制层的访问路径，看看能不能返回JSON字符串，如果不能，问题出在后台程序，如果能返回，往下面看 2，确认后台没问题后，再看ajax的success回调函数是否被执行（可以设断点调试或alert等），如果没有执行，可以考虑改为complete试试 3，如果回调函数也执行了，那就调试回调函数，看看返回的result参数是否是对象或格式是否正确

[-且随疾风-]

在大佬的帮助下已解决