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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
vue+element实现打印页面功能
May 20 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
PyQt5实现简单的计算器
2020/05/30 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
计算机专业自荐信
2013/10/14 职场文书
预备党员思想汇报
2014/01/08 职场文书
小学体育教学反思
2014/01/31 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
应聘教师求职信
2014/07/19 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
追悼会答谢词
2015/01/05 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书