您好,登錄后才能下訂單哦!
需求:
點(diǎn)擊tab頁(yè),切換四個(gè)不同的圖表,ajax向后臺(tái)請(qǐng)求數(shù)據(jù),展示在四個(gè)不同的圖表中。
其余的就不多說(shuō),直接上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(); }); /* 第一個(gè)圖表 */ var aChart = echarts.init(document.getElementById("main")); function aFun(x_data, y_data) { aChart.setOption({ title: { text: '睡眠質(zhì)量監(jiān)測(cè)' }, 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 }] } } }); } /* 第二個(gè)圖表 */ // 折線圖 var bChart = echarts.init(document.getElementById("main2")); function bFun(x_data, y_data) { bChart.setOption({ color : [ '#3398DB' ], tooltip : { trigger : 'axis', axisPointer : { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效 type : 'shadow' // 默認(rèn)為直線,可選為:'line' | 'shadow' } }, legend : { data : [ '心率值' ] }, grid : { left : '3%', right : '20%', bottom : '20%', containLabel : true }, xAxis : [ { type : 'category', data : x_data, } ], yAxis : [ { // 縱軸標(biāo)尺固定 type : 'value', scale : true, name : '心率值', max : 140, min : 0, splitNumber : 20, boundaryGap : [ 0.2, 0.2 ] } ], series : [ { name : '心率', type : 'line', data : y_data } ] }, true); } /* 第三個(gè)圖表 */ // 折線圖 var cChart = echarts.init(document.getElementById("main3")); function cFun(x_data, y_data) { cChart.setOption({ color : [ '#3398DB' ], tooltip : { trigger : 'axis', axisPointer : { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效 type : 'shadow' // 默認(rèn)為直線,可選為:'line' | 'shadow' } }, legend : { data : [ '呼吸值' ] }, grid : { left : '3%', right : '20%', bottom : '20%', containLabel : true }, xAxis : [ { type : 'category', data : x_data, } ], yAxis : [ { // 縱軸標(biāo)尺固定 type : 'value', scale : true, name : '呼吸值', max : 50, min : 0, splitNumber : 20, boundaryGap : [ 0.2, 0.2 ] } ], series : [ { name : '呼吸', type : 'line', data : y_data } ] }, true); } /* 第四個(gè)圖表 */ // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var dChart = echarts.init(document.getElementById('main4')); // 指定圖表的配置項(xiàng)和數(shù)據(jù) function dFun(data) { dChart.setOption({ tooltip: { /*返回需要的信息*/ formatter: function(param) { var value = param.value; return '<div > ' + value[0] + " 翻身" '</div>'; } }, xAxis: { show : false, type: 'time', name: '時(shí)間軸', }, 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); }, }); })
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。