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 相关文章推荐
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
Underscore源码分析
Dec 30 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
详解JS数值Number类型
Feb 07 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
提问的智慧(2)
2006/10/09 PHP
PHP4之真OO
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
django中的图片验证码功能
2019/09/18 Python
快速了解Python开发环境Spyder
2020/06/29 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
任命书模板
2014/06/04 职场文书
MySQL 数据类型详情
2021/11/11 MySQL