在做項目中遇到了一個echarts異步加載數據的填充,首先,查看官方文檔示例,了解相關屬性之后,再去了解異步請求的相關屬性,之后在異步中進行定義橫坐標和值數組定義,通過遍歷獲取result的值存放在定義的數組中,最后存放在data下便實現異步加載獲取數據,以下是示例:
function test(){ var myChart = echarts.init(document.getElementById('main')); // 顯示標題,圖例和空的坐標軸 myChart.setOption({ title: { text: '預計生產產量' }, tooltip: {}, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['數量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '數量', type: 'bar', data: [] }] }); myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫 var names=[]; //類別數組(實際用來盛放X軸坐標值) var nums=[]; //銷量數組(實際用來盛放Y坐標值) $.ajax({ type : "get", async : true, //異步請求(同步請求將會鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執行) url : "http://localhost:8080/wisdomeet/a/real/realProgress/realList", //請求發送到TestServlet處 success : function(result) { //請求成功時執行該函數內容,result即為服務器返回的json對象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].process.name); //挨個取出類別並填入類別數組 } for(var i=0;i<result.length;i++){ // nums.push(result[i].productionArrangement.number); //挨個取出銷量並填入銷量數組daliy nums.push(result[i].productionArrangement.daliy); } myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //加載數據圖表 xAxis: { data: names }, series: [{ // 根據名字對應到相應的系列 name: '數量', data: nums }] }); } }, error : function(errorMsg) { //請求失敗時執行該函數 alert("圖表請求數據失敗!"); myChart.hideLoading(); } }); };
后台接口示例:
@ResponseBody @RequestMapping(value="realList") public List<RealProgress> realList(RealProgress realProgress, HttpServletRequest request, HttpServletResponse response, Model model) { List<RealProgress> realList = realProgressService.findList(realProgress); return realList; }