首先先把官網上的demo拿過來,這時候的柱狀圖數據以及xy的數據都爲空javascript
樣式以下html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../js/echarts.min.js"></script> <script src="../js/echarts.js"></script> <!--引入js--> <script src="../js/jquery-1.10.2.js"></script> </head> <body> <!-- 爲ECharts準備一個具有大小(寬高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 顯示標題,圖例和空的座標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); </script> </body> </html>
如今咱們執行服務器的接口請求把,這張空的柱狀圖填滿,代碼以下java
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../js/echarts.min.js"></script> <script src="../js/echarts.js"></script> <!--引入js--> <script src="../js/jquery-1.10.2.js"></script> </head> <body> <!-- 爲ECharts準備一個具有大小(寬高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> 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", async : true, //異步請求(同步請求將會鎖住瀏覽器,用戶其餘操做必須等待請求完成才能夠執行) url : "TestServlet", //請求發送到TestServlet處 data : {}, dataType : "json", //返回數據形式爲json success : function(result) { //請求成功時執行該函數內容,result即爲服務器返回的json對象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].name); //挨個取出類別並填入類別數組 } for(var i=0;i<result.length;i++){ nums.push(result[i].num); //挨個取出銷量並填入銷量數組 } myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //加載數據圖表 xAxis: { data: names }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: nums }] }); } }, error : function(errorMsg) { //請求失敗時執行該函數 alert("圖表請求數據失敗!"); myChart.hideLoading(); } }) </script> </body> </html>