jQuery的deferred对象实战应用(附:Exchar动态多条数据展示并在topic展示详细数据)
解决三个后台请求都成功后先比较数据再处理数据的需求#
今天碰到了一个问题,我需要创建一个图表,但是需要请求三个接口才能比较出指标数据,于是就看到了deferred对象###
理论的补充在这里:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
var dealData = function(){
var defer1 = $.Deferred();
var defer2 = $.Deferred();
var defer3 = $.Deferred();
$.NstsGET(studyInfosUrl, {}, function(data) {
defer1.resolve(data);
});
$.NstsGET(exerciseInfosUrl, {}, function(data) {
defer2.resolve(data);
});
$.NstsGET(trainInfosUrl, {}, function(data) {
defer3.resolve(data);
});
$.when(defer1, defer2, defer3).done( function(data1, data2, data3) {
myChart.hideLoading();
// 数据处理在这里
arrayDate1 = null;
arrayDate2 = null;
arrayDate3 = null;
//======================数据处理end
//处理回调在这里
if (fn) {
fn(data1,data2,data3);
}
});
}
实战应用场景,比如用Exchar做的一个带有时间轴的统计表时,需要拿到对应的三个数据的最长时间:
如何需要配置tooltip,显示自定义数据?
自定义数据表现在这里:
tooltip: {
trigger: 'axis',
formatter: function(params) {
if (!params[0].value) {
params[0].value = "-";
}
if (!params[1].value) {
params[1].value = "-";
}
if (!params[2].value) {
params[2].value = "-";
}
if (!params[3].value) {
params[3].value = "-";
}
return params[0].name + '<br>考试成绩分数:' + params[0].value + '<br>练习题目数量:' + params[1].value + '<br>培训数量:' + params[2].value + '<br>知识点:' + params[3].value;
}
真正的数据在这里:
series: [{
name: '考试成绩分布',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#9ddffb'
}, {
offset: 1,
color: '#36ace9'
}]
)
}
},
data: dataStudy
}, {
name: '练习题目数量',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#fee3a9'
}, {
offset: 1,
color: '#ffc64b'
}]
)
}
},
data: dataExercise
},{
name: '培训数量分布',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#9dafcc'
}, {
offset: 1,
color: '#545f71'
}]
)
}
},
data: dataTrain
},{
name: '知识点',
type: 'line',
data: studyTopic
}]
};
注意最后一个type:line
是来欺骗Exchar的占位数据。。。这样就能实现三条数据可视化展示,搭配一条详细数据的需求了!
jQuery的deferred对象实战应用(附:Exchar动态多条数据展示并在topic展示详细数据)的更多相关文章
- jQuery的deferred对象使用详解——实现ajax线性请求数据
最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery的deferred对象学习
#copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...
- jQuery的deferred对象详解(转载)
本文转载自: jQuery的deferred对象详解(转载)
- jQuery的deferred对象
应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- jQuery的deferred对象解析
参考: jQuery的deferred对象详解:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_defe ...
- [转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- jQuery的deferred对象详解(转)
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
随机推荐
- [翻译 EF Core in Action] 1.5 关于NoSql
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- 机器学习之决策树二-C4.5原理与代码实现
决策树之系列二—C4.5原理与代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/9435712.html I ...
- cocos creator主程入门教程(九)—— 瓦片地图
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍瓦片地图,在开发模拟经营类游戏.SLG类游戏.RPG游戏,都会使用到瓦片地图.瓦片地图地面是通 ...
- 记一次按需加载和npm模块发布实践
按需加载 在使用 lodash 的时候我们可以使用这样的代码 //一 import {omit} from "lodash"; //二 import l from "lo ...
- Javascript 面向对象(共有方法,私有方法,特权方法,静态属性和方法,静态类)示例讲解
一,私有属性和方法 私有方法:私有方法本身是可以访问类内部的所有属性(即私有属性和公有属性),但是私有方法是不可以在类的外部被调用. <script> /* * 私有方法:私有方法本身是可 ...
- Java基础-异常、断言
处理错误 如果Java程序运行期间出现了错误,并且由于出现错误导致某些操作没有完成,程序应该能够返回到一种安全状态,并能够让用户执行一些其他的命令:或者允许用户保存所有操作结果,并以妥善的方式终止程序 ...
- .net core下Redis帮助类
0.引入.net core环境下Redis的NuGet包,StackExchange.Redis,现目前最新的2.0.519. 帮助类Code: using System; using Syste ...
- hive基础总结(面试常用)
hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行. Metastore (hiv ...
- maven生成项目慢解决办法
maven生成项目慢,原因:在线更新archetype-catalog.xml文件,从Apache中央仓库. 解决办法,手动下载,放到maven环境. 备用下载地址: https://files.cn ...
- 「插件」Runner更新Pro版,帮助设计师远离996
三年多前Runner团队在德国汉堡的骇客松上第一次发布了Sketch插件Runner的beta版本.从那以后,这个团队的目标一直很清晰: 创造一个加速设计工作流的工具. 他们只给Runner添加真正能 ...