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

最新推荐文章于 2024-04-03 09:49:36 发布
置顶 最新推荐文章于 2024-04-03 09:49:36 发布
阅读量7.3k 收藏 10
点赞数 5
分类专栏： echarts bootstrap 文章标签： bootstrap echarts js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24313955/article/details/78363981
版权

问题：

         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" />
		<link rel="stylesheet" href="../css/main.css" />
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
		<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" data-toggle="pill">1</a>
							</li>
							<li>
								<a href="#right2" data-toggle="pill">2</a>
							</li>
							<li>
								<a href="#" data-toggle="pill">3</a>
							</li>
							<li>
								<a href="#" data-toggle="pill">4</a>
							</li>
							<li>
								<a href="#" 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可能响应过慢）

github源码：            源码

csdn_FW
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
生如夏花 炫至茶靡
08-10 2万+
近期项目中也使用到了Echarts来画图表，也是两个tab切换页面中都存在图表，页面加载完成后都对所有图表进行了初始化和绘制，然而在tab切换中出现了如下动图中的问题： 图中可以看到，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。 我的解决方式如下： 1--在tab导航中加入radio单选按钮并隐藏，当第二个tab被选中的时候，再初始化图表数据
bootstrap tab插件 带有示例
09-24
bootstrap tab插件 标签 带有示例，适合新手学习，动态添加标签
解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
dearbaba_11的博客
06-24 145
解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
echarts--Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
VIP_CR的博客
03-20 703
问题： 在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 echarts自适应怎么实现？ 解决方法（一）： 待完善。。。。 解决办法（二）： //解决tab切换不显示问题 在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { for(var i = 0; i < charts.l
tab切换 echarts图表消失
最新发布
...
04-03 1695
tab切换 echarts图表消失
bootstrap-tab 切换触发点击事件
Griner_的博客
03-22 141
/触发事件do();});
bootstrap切换tab页局部刷新_使用Bootstrap tab页切换的使用
weixin_39517797的博客
12-19 222
代码：tab页切换1.参考网站：http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html2..fade增加淡入淡出效果；添加 .fade 到每个 .tab-pane 后面;3.第一个标签页必须添加 .in 类，以便淡入显示初始内容;W3Cschool HomeiOSJavajmeterejbW3Cschoool菜鸟教程是一个提供最新的web...
BootStrap 页签切换失效的解决方法
12-08
概述 bootstrap开发标签页时，标签页显示正常，但点击时候对应内容区域没有变化。 具体症状与解决方案 1.标签页UI出现，但点击无反应，标签页UI并未随点击进行切换 先检查bootstrap.css，jQuery.js和bootstrap.js是否有正确引入，并保证引入顺序jQuery在前，bootstrap.js在后。再检查代码中是否有其他报错中止了JS。 2.标签页可以随点击进行切换，但点击后前面几条内容可以切换，但后面几条内容切换失败 产生原因： 内容区域的html结构出现错误，在单个tab中多写了一个div的结束标签，使得tab-content这一div过早的关闭，剩下的tab-
关于使用bootstrap的tab选项卡时无法正常显示echarts图像的解决方案
Wayne1998的博客
04-02 2579
        最近做一个项目时，用到了echarts实现数据可视化，因为之前没怎么接触过echarts，导致在使用echarts时踩了不少的坑，其中一个就是关于“使用bootstrap的tab选项卡时无法正常显示echarts图像”的问题。在百度上找了很久，尝试了各种各样的解决方案，终于能让图像随着tab选项卡的切换正常显示了。解决方法容本菜鸡细细道来。        项目中的大致要求如上图所示...
tab切换echarts无法正常显示
hellojoy的博客
07-02 923
https://blog.csdn.net/cjs68/article/details/78072382 tab切换时候，第一个图正常显示，第二个及之后的图无法正常显示。 问题是这样的，用了两个tab切换，每个tab里面加载一个echarts图表，div的大小是百分比设置的，结果第一个echarts可以正常显示出来，第二个echarts被严重压缩了。 查看了一下网页布局，发现div是有大小的，但是里面加载的echarts宽高都是0，这可能就是echarts显示过小的原因。 有以下三个解决办法： 将.
jQuery+bootstrap+echarts踩坑记录：切换标签页时echarts图表显示异常
qq_35727582的博客
03-26 1202
切换标签页，echarts显示不正常的解决办法
Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
10-18
主要给大家介绍了关于Bootstrap标签页（Tab）插件切换echarts不显示问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
10-18
主要给大家介绍了关于Bootstrap开发中Tab标签页切换图表显示问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Bootstrap实现的标签页内容切换显示效果示例
08-30
在该示例中，我们使用 Bootstrap 的 Tab 插件来实现标签页内容切换显示效果。首先，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件，然后在 HTML 中添加标签页的结构代码。在标签页结构代码中，我们使用了 `nav-...
bootstrap-closable-tab可实现关闭的tab标签页插件
10-14
Bootstrap-Closable-Tab 是一个基于 Bootstrap 框架的插件，主要用于创建具有关闭功能的标签页。这个插件允许用户在使用过程中方便地关闭不再需要的标签页，提高用户体验。以下是对这个插件的详细说明： 1. **依赖*...
解决echart在tab中切换时显示不正确
u011599033的博客
05-26 2313
在VUE使用Element UI时，在el-tab-pane添加上lazy=’true’属性即可 <el-tab-pane label="远程测试控制" name="远程测试控制" lazy="true"> <remoteTestControl /> </el-tab-pane> 其他解决方法详见以下，作者写得很好，在不同的UI框架中遇到这种情况的解决方法 https://www.cnblogs.com/hao-1
show.bs.tab
qq_26983555的博客
09-11 1715
监听show.bs.tab事件的时候，会有event值。如下例子所示$('.nav[role="tablist"] li a[data-toggle="tab"]').on('show.bs.tab', function (e) { //var tabId = $(e.target).context.dataset.target;//ie10以下不支持
bootstrap 选项卡_使Bootstrap选项卡与砌体一起玩
culi3118的博客
09-02 431
bootstrap 选项卡Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in your project, and you’ll be able to whip up responsive web pages in no time. If you’ve...
bootstrap4切换组件echarts显示和响应式问题
helloWolfs的博客
08-18 438
varmyChart1=echarts.init(document.getElementsByClassName('echarts1')[0]); varmyChart2=echarts.init(document.getElementsByClassName('echarts2')[0]); myChart1.setOption(option1); myChart2.setOption(option2); //将echarts放入新数组保存起来 ...
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <li class="active"><a href="#tab1" data-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值