我是想实现一个功能用Echarts显示数据库里面的帖子标题和点击量数据。后台做完了到前台却一直不显示数据,调了很长时间实在没办法了。不知道是哪里的问题。
目前显示的效果是这样的,下面我把后台到前台的代码都列出来。
然后这个是浏览器控制台输出的从后台获取到的json格式数据
TieziMapper.xml
<select id="getListEchart" resultMap="BaseResultMap">
select biaoti,dianji from tiezi
</select>
TieziDao.java
List<Tiezi> getListEchart();
TieziService.java
public List<Tiezi> getListEchart(){
return tieziDao.getListEchart();
}
TieziController.java
@RequestMapping("listEchart")
public Object ListEchart(){
List<Tiezi> list = tieziService.getListEchart();
return list;
}
Main.jsp(这里的target='right'使用的IFrame框架让其固定显示)
<h2>
<span class="icon-pencil-square-o"></span>
图表
</h2>
<ul>
<li>
<a href='<%=path %>/admin/listEchart.jsp' target='right'>
<span class="icon-caret-right"></span>帖子点击量统计</a>
</li>
</ul>
```
listEchart.jsp
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option={
title:{ // 图表标题
text:'帖子点击数统计表'
},
tooltip:{
trigger:'axis',//坐标轴触发提示框
},
legend:{//图表上方的类别显示
show:true,
data:['访问量']
},
color:[
'#FF3333',
],
xAxis:{//x轴
name:'名称',
type:'category',
data:mingchengs
},
yAxis:{//y轴
name:'访问量',
data:fangwenliangs,
type:'value'
},
series:[//系列(内容)列表
{
name:'访问量',
type:'bar',
data:fangwenliangs,
}
]
};
myChart.showLoading();//数据加载完之前显示一段Loading动画
var mingchengs = [];
var fangwenliangs = [];
$.ajax({
type:"post",//post请求方式
url:"<%=request.getContextPath()%>/listEchart",
data:{},
dataType:"json",
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result != null && result.length > 0) {
for(var i=0;i<result.length;i++){
mingchengs.push(result[i].biaoti);
fangwenliangs.push(result[i].dianji);
console.log(mingchengs);
console.log(fangwenliangs);
}
myChart.hideLoading(); //隐藏加载动画
}
else {
//返回的数据为空时显示提示信息
alert("图表请求数据为空,可能服务器暂未录入数据,您可以稍后再试!");
myChart.hideLoading();
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败,可能是服务器开小差了");
myChart.hideLoading();
}
}
)
myChart.setOption(option);
</script>