Mewtwo_ 2020-02-29 14:20 采纳率: 100%
浏览 1236
已采纳

HELP!!!!Echarts图表无法显示数据了!!

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

2条回答 默认 最新

  • 张一毛 2020-02-29 14:26
    关注

    数据请求是异步的,在异步回调即ajax的success方法中,构造option和setOption

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题