首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

Posted in Javascript onJuly 13, 2018

问题：

1.  在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。

2.  echarts自适应怎么实现？

解决办法：

//解决tab切换不显示问题 在加载窗口后重新渲染。
 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 }); //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择
//echarts自适应
 var charts = [];
 var chart1 = echarts.init(document.getElementById("left1"));
 var chart2 = echarts.init(document.getElementById("left2"));
 var chart3 = echarts.init(document.getElementById("right11"));
 var chart4 = echarts.init(document.getElementById("right12"));
 var chart5 = echarts.init(document.getElementById("right21"));
 var chart6 = echarts.init(document.getElementById("right22"));
 chart1.setOption(option1);
 chart2.setOption(option1);
 chart3.setOption(option2);
 chart4.setOption(option2);
 chart5.setOption(option1);
 chart6.setOption(option1);
 charts.push(chart1);
 charts.push(chart2);
 charts.push(chart3);
 charts.push(chart4);
 charts.push(chart5);
 charts.push(chart6);
 $(window).resize(function() {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 })

下面看一个实现的demo:

            demo 完成内容：

                                      1. bootstrap实现响应式布局

                                      2. echats实现自适应

                                      3. 标签页切换、缩放正常显示

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" rel="external nofollow" />
 <link rel="stylesheet" href="../css/main.css" rel="external nofollow" />
 <!-- 可选的Bootstrap主题文件（一般不用引入） -->
 <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="external nofollow" >
 <title></title>
 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 <script src="../js/jquery-3.1.1.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="../js/bootstrap.min.js"></script>
 <!-- 最新的echarts核心 JavaScript 文件 -->
 <script src="../js/echarts.js"></script>
 <script src="../js/main.js" type="text/javascript" charset="utf-8"></script>
 </head>
 
 <body>
 <div class="container">
 <div class="row">
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-left">
  <div class="css_height1" id="left1">
  </div>
  <div class="css_height" id="left2">
  </div>
 </div>
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-right">
  <div class="right_title">
  <ul class="nav nav-pills">
  <li class="active">
  <a href="#right1" rel="external nofollow" data-toggle="pill">1</a>
  </li>
  <li>
  <a href="#right2" rel="external nofollow" data-toggle="pill">2</a>
  </li>
  <li>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="pill">3</a>
  </li>
  <li>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="pill">4</a>
  </li>
  <li>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="pill">5</a>
  </li>
  </ul>
  </div>
  <div class="tab-content">
  <div class="tab-pane fade in active" id="right1">
  <div class="css_height" id="right11">
 
  </div>
  <div class="css_height" id="right12">
 
  </div>
  </div>
  <div class="tab-pane fade in" id="right2">
  <div class="css_height" id="right21">
 
  </div>
  <div class="css_height" id="right22">
 
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </body>
</html>
<script type="text/javascript">
 var charts = [];
 var chart1 = echarts.init(document.getElementById("left1"));
 var chart2 = echarts.init(document.getElementById("left2"));
 var chart3 = echarts.init(document.getElementById("right11"));
 var chart4 = echarts.init(document.getElementById("right12"));
 var chart5 = echarts.init(document.getElementById("right21"));
 var chart6 = echarts.init(document.getElementById("right22"));
 chart1.setOption(option1);
 chart2.setOption(option1);
 chart3.setOption(option2);
 chart4.setOption(option2);
 chart5.setOption(option1);
 chart6.setOption(option1);
 charts.push(chart1);
 charts.push(chart2);
 charts.push(chart3);
 charts.push(chart4);
 charts.push(chart5);
 charts.push(chart6);
 $(window).resize(function() {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 });
 //解决tab切换不显示问题 在加载窗口后重新渲染。
 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 });
</script>
.css_height{
 height: 400px;
 margin-top: 30px;
}
.css_height1{
 height: 400px;
 margin-top: 72px;
}
.right_title{
 width: 90%;
 margin-left: 10%;
}
.nav>li>a{
 padding: 5px 18px;
 margin-top: 10px;
}
body{
 background-color:#009688;
}
.container{
 background-color:#dcedf5;
 margin-top: 25px;
 border-radius: 15px;
}
option1= {
 title: {
  text: '未来一周气温变化',
  subtext: '纯属虚构'
 },
 tooltip: {
  trigger: 'axis'
 },
 xAxis: {
  type: 'category',
  boundaryGap: false,
  data: ['周一','周二','周三','周四','周五','周六','周日']
 },
 yAxis: {
  type: 'value',
  axisLabel: {
   formatter: '{value} °C'
  }
 },
 series: [  {   name:'最高气温',   type:'line',   data:[11, 11, 15, 13, 12, 13, 10],
   markPoint: {
    data: [
     {type: 'max', name: '最大值'},
     {type: 'min', name: '最小值'}
    ]
   },
   markLine: {
    data: [
     {type: 'average', name: '平均值'}
    ]
   }
  },
  {
   name:'最低气温',
   type:'line',
   data:[1, -2, 2, 5, 3, 2, 0],
   markPoint: {
    data: [
     {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
    ]
   },
   markLine: {
    data: [
     {type: 'average', name: '平均值'},
     [{      symbol: 'none',      x: '90%',      yAxis: 'max'     }, {      symbol: 'circle',      label: {       normal: {        position: 'start',        formatter: '最大值'       }      },      type: 'max',      name: '最高点'     }]
    ]
   }
  }
 ]
};
option2 = {
 title: {
  text: '大规模散点图'
 },
 legend: {
  data:['sin','cos']
 },
 xAxis : [  {   type : 'value',   scale:true  } ],
 yAxis : [  {   type : 'value',   scale:true  } ],
 series : [  {   name:'sin',   type:'scatter',   large: true,   symbolSize: 3,   data: (function () {    var d = [];
    var len = 10000;
    var x = 0;
    while (len--) {
     x = (Math.random() * 10).toFixed(3) - 0;
     d.push([
      x,
      //Math.random() * 10
      (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
     ]);
    }
    //console.log(d)
    return d;
   })()
  },
  {
   name:'cos',
   type:'scatter',
   large: true,
   symbolSize: 2,
   data: (function () {
    var d = [];
    var len = 20000;
    var x = 0;
    while (len--) {
     x = (Math.random() * 10).toFixed(3) - 0;
     d.push([
      x,
      //Math.random() * 10
      (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
     ]);
    }
    //console.log(d)
    return d;
   })()
  }
 ]
};

demo效果链接：  demo

github源码： 源码  |  本地下载

总结

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

Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

- Author -

CSDN_FW

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 #Javascript
微信小程序实现tab页面切换功能
Jul 13 #Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
vue项目base64字符串转图片的实现代码
Jul 13 #Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
Excel(4) greenlet(1) 进销存(1) list(1) csv(4) Coroutine(1) find(1) 信息校验(1) gevent(1) pytest(3)
You might like
php数组总结篇(一）
2008/09/30 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
深入理解node.js http模块
2018/01/24 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
京东港澳售：京东直邮港澳台
2018/01/31 全球购物
Dodax奥地利：音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
JNI的定义
2012/11/25 面试题
广州地球村科技数据库题目
2016/04/25 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
爱情保证书大全
2014/04/29 职场文书
导游词之山东孔庙
2019/11/04 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang