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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
深入理解js数组的sort排序
May 28 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP Session机制简介及用法
2014/08/19 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
财务支持类个人的自我评价
2014/02/14 职场文书
员工工作表现评语
2014/04/26 职场文书
农业开发项目建议书
2014/05/16 职场文书
营销学习心得体会
2014/09/12 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang