echarts異步加載獲取數據


   在做項目中遇到了一個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;
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM