我是想实现一个功能用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>

ajax请求数据量最大可以为多少

javainvin

1个回复