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

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