echarts同一页面四个图表切换的js数据交互

需求：点击tab页，切换四个不同的图表，ajax向后台请求数据，展示在四个不同的图表中。

其余的就不多说，直接上js代码了

$(function() {
	$("#heart").on("click", function() {

		$('.heart-car').show();
		$('.sleep-car').hide();
		$('.breathe-car').hide();
		$('.sport-car').hide();

	});

	$("#breathe").on("click", function() {

		$('.heart-car').hide();
		$('.sleep-car').hide();
		$('.breathe-car').show();
		$('.sport-car').hide();
	});
	$("#sport").on("click", function() {

		$('.heart-car').hide();
		$('.sleep-car').hide();
		$('.breathe-car').hide();
		$('.sport-car').show();

	});
	$("#sleep").on("click", function() {

		$('.heart-car').hide();
		$('.sleep-car').show();
		$('.breathe-car').hide();
		$('.sport-car').hide();

	});
	


	/* 第一个图表 */
	
	var aChart = echarts.init(document.getElementById("main"));
	function aFun(x_data, y_data) {
		aChart.setOption({
			title: {
	            text: '睡眠质量监测'
	        },
	        tooltip: {
	            trigger: 'axis'
	        },
	        xAxis: {
	            data: x_data
	        },
	        yAxis: {
	            splitLine: {
	                show: false
	            }
	        },
	        toolbox: {
	            left: 'center',
	            feature: {
	                dataZoom: {
	                    yAxisIndex: 'none'
	                },
	                restore: {},
	                saveAsImage: {}
	            }
	        },
	        dataZoom: [{
	            startValue: '2014-06-01'
	        }, {
	            type: 'inside'
	        }],
	        visualMap: {
	            top: 10,
	            right: 10,
	            pieces: [ {
	                gt: 0,
	                lte: 1,
	                color: '#ffde33'
	            }, {
	                gt: 1,
	                lte: 2,
	                color: '#ff9933'
	            }, {
	                gt: 2,
	                lte: 3,
	                color: '#cc0033'
	            }, {
	                gt: 3,
	                lte: 4,
	                color: '#660099'
	            }],
	            outOfRange: {
	                color: '#999'
	            }
	        },
	        series: {
	            name: '睡眠',
	            type: 'line',
	            data: y_data,
	            markLine: {
	                silent: true,
	                data: [{
	                    yAxis: 0
	                }, {
	                    yAxis: 1
	                }, {
	                    yAxis: 2
	                }, {
	                    yAxis: 3
	                }, {
	                    yAxis: 4
	                }]
	            }
	        }
		});
	}

	/* 第二个图表 */
	// 折线图
	var bChart = echarts.init(document.getElementById("main2"));
	function bFun(x_data, y_data) {
		bChart.setOption({
			color : [ '#3398DB' ],
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				data : [ '心率值' ]
			},
			grid : {
				left : '3%',
				right : '20%',
				bottom : '20%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				data : x_data,
			} ],
			yAxis : [ { // 纵轴标尺固定
				type : 'value',
				scale : true,
				name : '心率值',
				max : 140,
				min : 0,
				splitNumber : 20,
				boundaryGap : [ 0.2, 0.2 ]
			} ],
			series : [ {
				name : '心率',
				type : 'line',
				data : y_data
			} ]
		}, true);
	}

	/* 第三个图表 */
	// 折线图
	var cChart = echarts.init(document.getElementById("main3"));
	function cFun(x_data, y_data) {
		cChart.setOption({
			color : [ '#3398DB' ],
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				data : [ '呼吸值' ]
			},
			grid : {
				left : '3%',
				right : '20%',
				bottom : '20%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				data : x_data,
			} ],
			yAxis : [ { // 纵轴标尺固定
				type : 'value',
				scale : true,
				name : '呼吸值',
				max : 50,
				min : 0,
				splitNumber : 20,
				boundaryGap : [ 0.2, 0.2 ]
			} ],
			series : [ {
				name : '呼吸',
				type : 'line',
				data : y_data
			} ]
		}, true);
	}
	
	
	
	/* 第四个图表 */
	// 基于准备好的dom，初始化echarts实例
	var dChart = echarts.init(document.getElementById('main4'));
	// 指定图表的配置项和数据
	function dFun(data) {
		dChart.setOption({
			
			 tooltip: {  
		            /*返回需要的信息*/  
		            formatter: function(param) {  
		                var value = param.value;  
		                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[0] + " 翻身"  
		                    '</div>';  
		            }  
		        },
		        
				xAxis: {
					show : false,
					type: 'time',
					name: '时间轴',
					

				},
				yAxis: {
					type: 'value',
					name: '翻身',

					max: 9,
					min: 0,
				},
				series: [{
					name: '',
					data: data,
					type: 'scatter',
					symbolSize: 40
				}]
			});
	}

	
	$.ajax({
		url : "/bison/stats/mattess/getDetail?id=" + $("#sid").val(),
		async : false,
		type : 'GET',
		dataType : 'json',
		success : function(data) {
			
			var status = data.returnData.status;
			status.echatX == ''?aFun("[]","[]"):aFun(status.echatX,status.echatY);
			
			var hb = data.returnData.heartBreath;
			if(hb.echatX == ''){
				bFun("[]","[]");
				cFun("[]","[]");
			}else{
				bFun(hb.echatX, hb.echatY);
				cFun(hb.echatX, hb.echatY2);
			}
			
			var move = data.returnData.move;
			dFun(move);
			
		},
	});

})