ajax获取后台数据在echarts上显示的是undefined

ajax获取后台数据在echarts上显示的是undefined

问题描述:

小白一个,这几天用echarts做图,ajax从后台获取到数据后在图上显示的是undefined,为什么啊!!!!!!

你填充不对吧。。。我赋值都是可以显示的

没有找到那个程序,你看看是不是url地址填错了

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("9999999999999");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");

        try {
            String bookDataList = gdService.getBookDataList();
            System.out.println(bookDataList);
            out.print(bookDataList);  
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }


}

//图书数据=====================================================================
public String getBookDataList() throws SQLException{

ArrayList bookDataList=new ArrayList();
String sql = "select bookType,count(bookType) as borrowcount from book GROUP BY(bookType)";
Result result=bd.getList(sql);
Object[][] data=result.getRowsByIndex();
for (int i = 0; i < data.length; i++) {
Book book=new Book();
book.setBookType(data[i][0].toString());
book.setBorrowcount(Integer.parseInt(data[i][1].toString()));
bookDataList.add(book);
}
String jsonstr="[";

try {

for(int i=0;i<bookDataList.size();i++){
JSONObject json1 = new JSONObject();
json1.put("bookType", bookDataList.get(i).getBookType());
json1.put("borrowcount", bookDataList.get(i).getBorrowcount());

            if(i<bookDataList.size()-1){jsonstr=jsonstr+json1.toString()+",";}  
            if(i==bookDataList.size()-1){jsonstr=jsonstr+json1.toString();} 
        } 
    } catch (JSONException e) {  
        e.printStackTrace();  
    }   
    jsonstr=jsonstr+"]"; 
    System.out.println(jsonstr);
    return jsonstr;
}

    var myChart = echarts.init(document.getElementById('main'));
     // 显示标题,图例和空的坐标轴
     myChart.setOption({
         title: {
             text: '图书分类借阅量'
         },
         tooltip: {},
         legend: {
             data:['借阅量']
         },
         xAxis: {
             data: []
         },
         yAxis: {},
         series: [{
             name: '借阅量',
             type: 'bar',
             data: []
         }]
     });

     myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

     var names=[];    //类别数组(实际用来盛放X轴坐标值)
     var nums=[];    //销量数组(实际用来盛放Y坐标值)

      $.ajax({

        type:"post",
        contentType:"application/x-www-form-urlencoded;charset=utf-8",
               //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
     url : "servlet/GetAllDataServlet",    //请求发送到TestServlet处
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {

         //请求成功时执行该函数内容,result即为服务器返回的json对象
         if (result) {
                var obj = eval(result);

                for(var i=0;i<obj.length;i++){ 

                   names.push(result[i].name);    //挨个取出类别并填入类别数组
                 }
                for(var i=0;i<obj.length;i++){       
                    nums.push(result[i].num);    //挨个取出销量并填入销量数组
                  }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '借阅量',
                        data: nums
                    }]
                }); 

         }

    },
     error : function(errorMsg) {
         //请求失败时执行该函数
     alert("图表请求数据失败!");
     myChart.hideLoading();
     }

});

开f12 调试一下 在watch中添加这个变量看下哪里获取有问题

看看返回的json数据 组装是否正确

```var echartDevice = echarts.init(document.getElementById('echartDevice'));

    function searchStatFun() {
        echartOption = {
            title: { text: '设备分类统计', x: 'center' },
            tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
            series: [{ name: '分类数量', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [] }]
        };
        $.ajax({
            async: true,
            dataType: 'json',
            url: ur,              
            success: function (result) {
                console.log(result);
                if (result.retCode == "0000") {
                    if (result.list.length > 0) {
                        for (i in result.list) {
                            var type = result.list[i].deviceType;
                            var count = result.list[i].deviceCount;
                            echartOption.series[0].data.push({ value: count, name: type });
                        }
                        echartDevice.setOption(echartOption);
                    }
                }
            }
        })            
    }