首页
所有分类
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 相关文章推荐
js字符串的各种格式的转换 ToString，Format
Aug 08 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
巴基斯坦购物网站(2) 菲律宾购物网站(13) 越南购物网站(9) 秘鲁购物网站(1) 缅甸购物网站(1) 捷克购物网站(26) 匈牙利购物网站(11) 卡塔尔购物网站(3) 摩纳哥购物网站(1) 北美洲购物网站(1)
You might like
PHP句法规则详解 入门学习
2011/11/09 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JS获取父节点方法
2009/08/20 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
STP协议的主要用途是什么？为什么要用STP
2012/12/20 面试题
机电专业大学生职业规划书范文
2014/02/25 职场文书
西式结婚主持词
2014/03/14 职场文书
司仪主持词两篇
2014/03/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers