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

图片.png

其余的就不多说，直接上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);},});})