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);
}
}
}
})
}