需求：

点击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); }, });})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。