重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

需求:

成都创新互联专业为企业提供萨迦网站建设、萨迦做网站、萨迦网站设计、萨迦网站制作等企业网站建设、网页设计与制作、萨迦企业网站模板建站服务,十多年萨迦做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

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

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

其余的就不多说,直接上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 '
' + value[0] + " 翻身" '
'; } }, 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); }, }); })

总结

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


网站名称:echarts同一页面中四个图表切换的js数据交互方法示例
地址分享:http://cqcxhl.cn/article/gdeccj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP