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


Posted in Javascript onJuly 03, 2018

需求:

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

总结

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

Javascript 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
基于React+Redux的SSR实现方法
Jul 03 #Javascript
VUE 3D轮播图封装实现方法
Jul 03 #Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Python greenlet实现原理和使用示例
2014/09/24 Python
python随机生成指定长度密码的方法
2015/04/04 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
社会实践自我鉴定
2013/11/07 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
铣工实训报告
2014/11/05 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS