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

This article mainly introduces to you the relevant information about the js data interaction of four charts in the same page of echarts. The article gives a complete sample code for your reference and study, which is of certain significance to your study or work. Help, friends in need come and learn together

Requirements:

Click on the tab page to switch four different charts, ajax to The background request data is displayed in four different charts.

I won’t say much about the rest, just go to the js code

Sample code:

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to two ways to use Echarts in Vue

About several commonly used methods in VUE Introduction to import (module, file) introduction methods

The above is the detailed content of js data interaction method for switching four charts on the same page in echarts. For more information, please follow other related articles on the PHP Chinese website!