echarts同一页面中四个图表切换的js数据交互方法示例

需求：

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

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

示例代码：

rush: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' ],legend : {
data : [ '呼吸值' ]
},name : '呼吸值',max : 50,series : [ {
name : '呼吸',true);
}

/ 第四个图表 /
// 基于准备好的dom，初始化echarts实例
var dChart = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据
function dFun(data) {
dChart.setoption({

tooltip: { 
 /*返回需要的信息*/ 
 formatter: function(p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m) { 
  var value = p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.value; 
  return '<div style="border-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 1px solid rgba(255,255,.3); font-size: 16px;padding-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 7px;margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 7px;"&gt; ' + 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);
},});
})

总结

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