一个解析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");
                    }
                });
        }

    }
时间: 2024-10-24 10:01:05

一个解析json串并组装echarts的option的函数解析的相关文章

IOS开发专题---转化解析JSON格式为字符格式(原生类库解析)

1,不浪费时间,本代码经实践检验通过! //网络请求代码段 //post  request NSURL *url=[NSURL URLWithString:@"http://192.168.253.101:8080/ERP/mobile/login.action"]; NSMutableURLRequest *request =[[NSMutableURLRequest alloc]initWithURL:url cachePolicy:NSURLRequestUseProtocolC

Boost property_tree解析json

使用Boost property_tree解析json 之前使用jsoncpp解析json,现在才知道boost就有解析的库,学习一下吧 property_tree可以解析xml,json,ini,info等格式的数据,用property_tree解析这几种格式使用方法很相似. 解析json很简单,命名空间为boost::property_tree,reson_json函数将文件流.字符串解析到ptree,write_json将ptree输出为字符串或文件流.其余的都是对ptree的操作. 解析

安卓中解析json数据

一.概述 JSON是JavaScript Object Notation的简称,起源于js(javascript)它是一种轻量级的数据交换格式,JSON不仅在js中广泛使用,同时还在其他领域得到广泛使用,如c,c++,java,Php,swift等等,成为了一种通用的理想数据交换格式,它有两种数据结构,分别是对象,数组,它形式上有花括号{}和中括号[]嵌套,{}中的是代表对象,[]中的为数组,即对象中有数组,数组中又有对象,而且以及键/值对出现. json语法: 数据在键值对中 数据有逗号分离

Android中解析Json数据

在开发中经常会遇到解析json的问题 在这里总结几种解析的方式: 方式一: json数据: private String jsonData = "[{\"name\":\"Michael\",\"age\":20},{\"name\":\"Mike\",\"age\":21}]"; 解析jsonData的方法 try { //如果需要解析Json数据,首先要生成一个J

android_使用Gson解析json数据

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二种类型是序列(sequence),也就是若干个相关的数据按照一定顺序并列在一起,又叫做数组(array)或列表(List),比如"北京,上海". 第三种类型是映射(mapping),也就是一个名/值对(

.NET中常用的几种解析JSON方法

一.基本概念 json是什么? JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是一种轻量级的数据交换格式,是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. 序列化和反序列化是怎么回事? 序列化: 将数据结构或对象转换成二进制串的过程 反序列化:将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程 如何:对 JSON 数据进行序列化和反序列化? 1.定义 Person 的数据协定 通过

JS解析Json 数据并跳转到一个新页面,取消A 标签跳转

JS解析Json 数据并跳转到一个新页面,代码如下 $.getJSON("http://api.cn.abb.com/common/api/staff/employee/" + obj.id, function (result) { window.open("https://abb-my.sharepoint.com/_layouts/15/me.aspx?p=" + result.Email, "_blank") }); 取消A 标签跳转 &l

js之第三方工具解析JSON

1.JSON 仅仅是一种文本字符串.它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据,须要依据 JavaScript 的 eval 函数.函数 eval 会把一个字符串当作它的參数. 然后这个字符串会被当作 JavaScript 代码来运行.由于 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可运行的 比如例如以下方式: String json = "{username:'一叶扁舟',age:22}&quo

javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包. JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合.一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’对”之间使用“,”(逗号)分隔. 在开