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的占位数据。。。这样就能实现三条数据可视化展示，搭配一条详细数据的需求了！