一个解析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");
}
});
} }
一个解析json串并组装echarts的option的函数解析的更多相关文章
- Boost property_tree解析json
使用Boost property_tree解析json 之前使用jsoncpp解析json,现在才知道boost就有解析的库,学习一下吧 property_tree可以解析xml,json,ini,i ...
- JSON语言规范与Java中两种解析工具基本使用
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6652250.html 一:JSON语言规范 一言以蔽之:“一个 :一个键值对,一个{}一个对象,一个[]一个 ...
- Android中解析Json数据
在开发中常常会遇到解析json的问题 在这里总结几种解析的方式: 方式一: json数据: private String jsonData = "[{\"name\":\ ...
- .NET中常用的几种解析JSON方法
一.基本概念 json是什么? JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是一种轻量级的数据交换格式,是存储和交换文本信息的语法. ...
- 解析JSON的两种方法eval()和JSON.parse()
解析JSON 一种方法是使用eval函数. var dataObj = eval("("+json+")"); 必须把文本包围在括号中,这样才能避免语法错误,迫 ...
- Java解析Json数据的两种方式
JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量,所以使用越来越广泛,下面介绍使用JsonObject和JsonArray的两种方式解析Json数据. 使用以上两种方式解析json ...
- JSON.stringify()方法是将一个javascript值(对象或者数组)转换成为一个JSON字符串;JSON.parse()解析JSON字符串,构造由字符串描述的javascript值或对象
JSON.stringify()方法是将一个javascript值(对象或者数组)转换成为一个JSON字符串:JSON.parse()解析JSON字符串,构造由字符串描述的javascript值或对象
- 再次提供一个纯粹通过pl/sql解析json的方法。
在github上面有一个叫pljson的项目,该项目就是用pl/sql 来解析json的. 项目地址:pljson(需翻|强),如果翻不了强的同学,我在国内克隆了一个副本,不定期同步更新 pljson ...
- Python3基础 json.loads 解析json格式的数据,得到一个字典
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
随机推荐
- C标准头文件<math.h>
定义域错误可以理解为超出了函数的适用范围,如果发生了定义域错误,设errno为EDOM 如果结果不能表示为double值,则发生值域错误,如果结果上溢,则函数返回HUGE_VAL的值,设errno为E ...
- Win7(x64)升级到Win10
北京时间7月29日零点起,微软正式开始向包含中国在内的全球用户推送Windows 10正式版安装包,Win7.Win8正版用户从29日零点起就可以免费升级到Win 10. 如果你的C盘里边有“$Win ...
- jQuery+css3侧边栏导航菜单
效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...
- iOS面试题 -总结 ,你的基础扎实吗?
1.#import和#include的区别,@class代表什么? (1)#import指令是Object-C针对#include的改进版本,#import确保引用的文件只会被引用一次,这样你就不会陷 ...
- android Intent介绍
Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组件,将 ...
- 手机游戏渠道SDK接入工具项目分享(一)缘起
#剧情章节 # 上周刚结束一个外包的项目,开发手机游戏渠道SDK聚合接入工具的,现在有空回顾整理一下这个项目开发过程,因涉嫌商业秘密不会提供项目代码,只谈下开发思路和掉过的坑. 本人多年从事手机互联网 ...
- ListView之点击展开菜单
一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...
- 关于用sql语句实现一串数字位数不足在左侧补0的技巧
在日常使用sql做查询插入操作时,我们通常会用到用sql查询一串编号,这串编号由数字组成.为了统一美观,我们记录编号时,统一指定位数,不足的位数我们在其左侧补0.如编号66,我们指定位数为5,则保存数 ...
- Oracle读取excel
--解析excel,转换成table,可供查询,支持xls.xlsx --首先修改这个Type,长度改为4000. CREATE OR REPLACE TYPE XYG_PUB_DATA_UPLOAD ...
- 超像素经典算法SLIC的代码的深度优化和分析。
现在这个社会发展的太快,到处都充斥着各种各样的资源,各种开源的平台,如github,codeproject,pudn等等,加上一些大型的官方的开源软件,基本上能找到各个类型的代码.很多初创业的老板可能 ...