解决三个后台请求都成功后先比较数据再处理数据的需求#

今天碰到了一个问题,我需要创建一个图表,但是需要请求三个接口才能比较出指标数据,于是就看到了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展示详细数据)的更多相关文章

  1. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  2. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  3. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  4. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  5. jQuery的deferred对象

    应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...

  6. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  7. jQuery的deferred对象解析

    参考: jQuery的deferred对象详解:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_defe ...

  8. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  9. jQuery的deferred对象详解(转)

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

随机推荐

  1. TabLayoutBottomDemo【TabLayout实现底部选项卡】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用TabLayout实现底部选项卡切换功能. 效果图 代码分析 1.演示固定模式的展现 2.演示自定义布局的实现 使用步骤 一.项 ...

  2. JVM回收器与调优

    定义: 使用编程语言将GC算法实现出来,产生的程序就是垃圾搜集器了 JVM给了三种选择:串行收集器.并行收集器.并发收集器 串行搜集器(serial collector):它只有一条GC线程,且就像前 ...

  3. Springboot整合Elastic-Job

    Elastic-Job是当当网的任务调度开源框架,有以下功能 分布式调度协调 弹性扩容缩容 失效转移 错过执行作业重触发 作业分片一致性,保证同一分片在分布式环境中仅一个执行实例 自诊断并修复分布式不 ...

  4. seg:NLP之正向最大匹配分词

    已迁移到我新博客,阅读体验更佳seg:NLP之正向最大匹配分词 完整代码实现放在我的github上:click me 一.任务要求 实现一个基于词典与规则的汉语自动分词系统. 二.技术路线 采用正向最 ...

  5. JavaScript引擎浅析

    前言 该文章是为大家整理一个关于js的知识网络,重点是知识的罗列及之间的联系,所以实例可能会有所不足,导致可能没有对应知识的人看不懂,希望大家能够结合其他资料来学习这篇文章,并整理出自己的知识体系. ...

  6. 基于IdentityServer的系统对接微信公众号

    业务需求 公司有两个业务系统,A和B,AB用户之间属于多对一的关系,数据库里面也就是两张表,A表有个外键指向B.现在需要实现以下几个功能. A用户扫描B的二维码,填写相关的注册信息,注册完成之后自动属 ...

  7. 🧬 C# 神经网络计算库和问题求解

    Andrew Kirillov 著 Conmajia 译 2019 年 1 月 12 日 原文发表于 CodeProject(2006 年 11 月 19 日),已获作者本人授权. 本文介绍了一个用于 ...

  8. 【深度学习系列】PaddlePaddle垃圾邮件处理实战(二)

    PaddlePaddle垃圾邮件处理实战(二) 前文回顾   在上篇文章中我们讲了如何用支持向量机对垃圾邮件进行分类,auc为73.3%,本篇讲继续讲如何用PaddlePaddle实现邮件分类,将深度 ...

  9. chrome主页被篡改为hao123 win10系统

    应该是开了个从流氓网站下的蓝灯,然后发现主页被篡改 尝试chrome设置修改无效,应该是快捷方式被改了 系统 win10 1.打开对应的下面两个地址,找到chrome的快捷方式,右键属性 C:\Use ...

  10. Java基础-异常、断言

    处理错误 如果Java程序运行期间出现了错误,并且由于出现错误导致某些操作没有完成,程序应该能够返回到一种安全状态,并能够让用户执行一些其他的命令:或者允许用户保存所有操作结果,并以妥善的方式终止程序 ...