首页
所有分类
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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
JS常用正则表达式总结
Nov 12 Javascript
Three.js学习之几何形状
Aug 01 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
虚拟机(3) 磁盘管理(1) plus.io(1) Vmware(3) 目录管理(1) Get(1) RabbitMQ(3) Hash(1) html5+(1) 入门基础(1)
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
关于文本留言本的分页代码
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP实现简单登录界面
2019/10/23 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python分支结构（switch）操作简介
2018/01/17 Python
django中send_mail功能实现详解
2018/02/06 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
瑞典最大的儿童用品网上商店：pinkorblue.se
2021/03/09 全球购物
销售代表求职自荐信
2013/10/01 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
数学检讨书1000字
2014/02/24 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript