js-Dateninteraktionsmethode zum Wechseln von vier Diagrammen auf derselben Seite in Echarts

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur js-Dateninteraktion zum Wechseln zwischen vier Diagrammen auf derselben Seite von Echarts vor. Der Artikel enthält einen vollständigen Beispielcode für Ihre Referenz und Ihr Studium, der für Ihre Studie oder Ihr Studium von gewisser Bedeutung ist Arbeit. Helfen Sie, Freunde in Not kommen und lernen zusammen

Anforderungen:

Klicken Sie auf die Registerkarte, um zwischen vier verschiedenen Diagrammen zu wechseln, Ajax Die Hintergrundanforderungsdaten werden in vier verschiedenen Diagrammen angezeigt.

Über den Rest werde ich nicht viel sagen, gehen wir direkt zum js-Code

Beispielcode:

$(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: &#39;time&#39;,
     name: &#39;时间轴&#39;,
     

    },
    yAxis: {
     type: &#39;value&#39;,
     name: &#39;翻身&#39;,

     max: 9,
     min: 0,
    },
    series: [{
     name: &#39;&#39;,
     data: data,
     type: &#39;scatter&#39;,
     symbolSize: 40
    }]
   });
 }

 
 $.ajax({
  url : "/bison/stats/mattess/getDetail?id=" + $("#sid").val(),
  async : false,
  type : &#39;GET&#39;,
  dataType : &#39;json&#39;,
  success : function(data) {
   
   var status = data.returnData.status;
   status.echatX == &#39;&#39;?aFun("[]","[]"):aFun(status.echatX,status.echatY);
   
   var hb = data.returnData.heartBreath;
   if(hb.echatX == &#39;&#39;){
    bFun("[]","[]");
    cFun("[]","[]");
   }else{
    bFun(hb.echatX, hb.echatY);
    cFun(hb.echatX, hb.echatY2);
   }
   
   var move = data.returnData.move;
   dFun(move);
  },
 });
})

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in zwei Möglichkeiten zur Verwendung von Echarts in Vue

Über mehrere häufig verwendete Methoden in VUE Einführung zum Importieren (Modul, Datei) Einführungsmethoden

Das obige ist der detaillierte Inhalt vonjs-Dateninteraktionsmethode zum Wechseln von vier Diagrammen auf derselben Seite in Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!