js data interaction method for switching four charts on the same page in echarts

$(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 &#39;<p style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> &#39; + value[0] + " 翻身"

       &#39;</p>&#39;;

     }

    },

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

  },

 });

})