一個解析json串並組裝echarts的option的函數解析

緣起：

在組裝echart頁面的時候，遇到這樣一個問題，它是一個需要在循環內層的時候，同時循環外層，在內層循環中就要將外層獲取的值存入，導致了一種糾纏狀態，費了老勁兒，終於得到如下解決。記錄之，綠色為語句功能注釋。

/**
     * @desc  獲取用戶使用網絡數據
     * @param  index_type
     * @param  chatId
     */
    function getNetWorkData(index_type,chatId,start,end) {
        // 傳遞三個參數，index_type為數據類型，chatId為echarts容器Id,start為所取數據開始時間，end為結束時間
        var app_id = get_app_id();
        //從cookie獲取當前應用id串，該id在ue文件中
        var qdate =$("#date-written").text();
        //從月份選擇控件中取當前選擇月份
        var date_str="";
        //定義一個空字符串變量
        qdate=qdate.replace("年", "/");
        //對月份進行處理，替換漢字"年"為"/"
        qdate=qdate.replace("月", "/01");
        //對月份進行處理，替換漢字"月"為"/01"
        date_str = qdate.trim();  //查詢時間
        //去除月份字符串頭尾空格
        if (date_str != null && date_str != undefined) {
            //只有當月份參數不為空才發起ajax請求
            $.post(
                "/jppt/jp-index-data/comments",
                //請求地址
                {
                    appid: app_id,
                    indexType: index_type,
                    startDate:start,
                    endDate:end
                },
                //請求參數，對象表示
                function (result,status) {
                    //接收返回的json格式字符串及狀態碼
                    if (checkResult(result)) {
                        //檢測數據返回是否正常
                        result = JSON.parse(result);
                        //對返回的字符串解析為json對象並賦值
                        console.log(result);
                        var xAxisData=[],series=[],appstore=[],legendData=[],
                            //定義x坐標顯示名數組，series為圖形值數組，appstore為臨時數組，legendData為圖標title數組
                            data = result['data'],comment;
                        //取所需使用的對象賦值，定義一個臨時變量
                        $.each(data, function (app,obj) {
                            //遍歷data對象，app為鍵值即app名，obj為每個app的值，一個存儲有關於該app信息的對象
                            xAxisData.push(app);
                            //將app名推入x坐標數組，用於組裝option
                            $.each(obj,function (i,a) {
                                //對obj對象進行二次遍歷
                               var t = a['indexValue'].split("|");
                                //indexValue:"3G:0.2686155493365|4G:0.68090354160497|WIFI:0.72134356910983" 對此格式的字符串進行分割處理，成為t數組
                                $.each(t,function (j,s) {
                                    //對t數組進行遍歷，j為索引值，s為鍵值
                                    comment = s.split(":");
                                    //對分割后的數組如["3G:0.2686155493365"]進行二次分割成["3G",""0.2686155493365]
                                    if(!appstore[j]){
                                        //檢測臨時數組是否有屬性j，即第j個存不存在，不存在則定義一個空數組,此處使用hasOwnProperty也是可以的，用以檢測鍵名是否存在，以下同
                                        appstore[j] = [];
                                    }
                                    if(!legendData[j]){
                                        //如果圖標數組含有j屬性，將切割后的comment鍵名賦值給它，比如4G，此數組將用來在option中進行循環，因為series單元的數量由其決定
                                        legendData[j] = comment[0];
                                    }
                                    var temp = (comment[1]*100).toFixed(2);
                                    //截取長字符串為小數點后2位
                                    appstore[j].push(temp);
                                    //將截取后的字符串推入動態數組
                                });
                            });

                        });
                        //循環option中的series，循環圖標名及data值
                        $.each(legendData,function (i,n) {
                            seriesItem = {
                                name: n,
                                type: 'bar',
                                barGap:"15%",
                                barWidth:90,
                                label: {
                                    formatter: "{a} :{c} %",
                                    position: "insideRight",
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        label: {
                                            formatter: "{a} : {c} %",
                                            position: "insideRight",
                                            show: true
                                        }
                                    }
                                },
                                data:appstore[i]
                            };
                            series.push(seriesItem);
                            //循環一次，將組裝好的單元推入series數組
                        });

                        var dom = document.getElementById(chatId);
                        var myChart = echarts.init(dom);
                        var option=setNetWordOption(legendData,xAxisData,series);
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                    } else {
                        console.log("數據異常");
                    }
                    if(status == "success"){
                        $("#umask").removeClass("mask");
                    }
                });
        }

    }