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

最新推荐文章于 2024-06-07 10:28:47 发布

百小容是程序员

最新推荐文章于 2024-06-07 10:28:47 发布

阅读量706

点赞数

分类专栏： echarts

原文链接：https://github.com/github-fw/bootstrap-echarts

版权

echarts 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

问题：

在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。
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" 根据前面所用标签页的不同来选择

1、在js文件页面最上面定义一个js数组。如var charts = new Array();
因为我的主页是根据$(function(){ … })。

然后在里面…位置写了如下所示的，使用调用方法进行处理的。
2、然后呢，在你调用的方法，最下面加上charts.push(chart);即可。

chart.setOption(memoryOption, true);
charts.push(chart);

3、然后呢，js文件最后面加上如下所示代码即可。

 //解决切换tab,非默认的柱状图表格不显示问题
  $(function(){
     //console.log(charts);//打印显示是否添加进去
     $(window).resize(function() {
         for(var i = 0; i < charts.length; i++) {
             charts[i].resize();
         }
     });
     
     //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择。我使用的是data-toggle="tab"。
     //解决tab切换不显示问题 在加载窗口后重新渲染。
     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
         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>

echarts图表中 option1 和option2的值，如下：

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;
            })()
        }
    ]
};

css代码参考如下：

.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;
}

demo的效果（github可能响应过慢）：https://github-fw.github.io/bootstrap-echarts/
github源码：https://github.com/github-fw/bootstrap-echarts

原文链接：https://blog.csdn.net/qq_24313955/article/details/78363981

百小容是程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts--Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

问题：在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。echarts自适应怎么实现？解决方法（一）：待完善。。。。解决办法（二）：//解决tab切换不显示问题在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { for(var i = 0; i < charts.l
复制链接

扫一扫