<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Ajax2</title> <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../../Scripts/echarts.js" type="text/javascript"></script> </head> <body> <div id="chartmain" style="600px; height: 400px;"></div> <div id="t1"></div> <div id="t2"></div> <div id="t3"></div> <script type="text/javascript"> //初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //设置图标配置项 myChart.setOption({ title: { text: 'ECharts 异步加载数据' }, tooltip: {}, legend: { data: ['访问量'] }, xAxis: { data: [] }, yAxis: {}, series: [ { name: '访问量', type: 'bar', data: [] } ] }) myChart.showLoading(); $.ajax({ url: '/Home/MyData_Test', async: true, dataType: 'json', success: function (data) { /*判断是否取到json对象 $("#t1").html(data[0].Name + ',' + data[0].Data); $("#t2").html(data[1].Name + ',' + data[1].Data); $("#t3").html(data[2].Name + ',' + data[2].Data);*/ //将json对象转换成对应的数组！ //var a = [data[0].Name, data[1].Name, data[2].Name, data[3].Name]; //var b = [data[0].Data, data[1].Data, data[2].Data, data[3].Data]; //声明数组 var a = new Array(); var b = new Array(); //给数组赋值,将json对象中的属性赋值给数组 for (i = 0; i < getJsonObjLength(data); i++) { a.push(data[i].Name); b.push(data[i].Data); }; myChart.hideLoading(); myChart.setOption({ xAxis: { data: a }, series: [{ name: '访问量', data: b }] }) } }) //*********获取json对象个数**********// function getJsonObjLength(jsonObj) { var Length = 0; for (var item in jsonObj) { Length++; } return Length; } </script> </body> </html>