关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题

时间:2022-09-07 13:43:49

在开发过程中遇到这样个问题:

  利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示。

关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题

其html代码为:

 <div class="col-xs-6" style="padding:10px;">
<ul class="nav nav-tabs" id="myTab1">
<li><a href="##" style="font-weight: 700;color:black;">访客年龄统计</a></li>
<li class="active"><a href="#home11" data-id="0">年</a></li>
<li><a href="#home12" data-id="1">月</a></li>
<li><a href="#home13" data-id="2">日</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home11">
<!-- echarts容器 -->
<div class="chart">
<div id="main_11" style="height:400px;"></div>
</div>
</div>
<div class="tab-pane" id="home12">
<div class="chart">
<div id="main_12" style="height:400px;"></div>
</div>
</div>
<div class="tab-pane" id="home13">
<div class="chart">
<div id="main_13" style="height:400px;"></div>
</div>
</div>
</div>
</div>

js代码为:

 var myChart11 = echarts.init(document.getElementById('main_11'));
var myChart12 = echarts.init(document.getElementById('main_12'));
var myChart13 = echarts.init(document.getElementById('main_13'));
// 指定图表的配置项和数据
option = {
title: {
text: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
left: 'left',
data: ['全部', '男', '女']
},
xAxis: {
type: 'category',
name: 'x',
splitLine: { show: false },
data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: '全部',
type: 'line',
data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
},
{
name: '男',
type: 'line',
data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
},
{
name: '女',
type: 'line',
data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart11.setOption(option);
myChart12.setOption(option);
myChart13.setOption(option);

  此代码的结果为上边图片所展示的效果,经过查找之后发现“月”和“日”所对应的echats图表的宽度为0,根本就没有画在所对应的盒子中,也就是说根本就没有渲染。

  后来经过查资料发现了一个方法可以解决这个问题,那便是给tab栏中的导航栏注册“shown.bs.tab”事件,在事件里边让每个echats渲染一遍。

  var arr=[];
var myChart11 = echarts.init(document.getElementById('main_11'));
var myChart12 = echarts.init(document.getElementById('main_12'));
var myChart13 = echarts.init(document.getElementById('main_13'));
// 指定图表的配置项和数据
option = {
title: {
text: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
left: 'left',
data: ['全部', '男', '女']
},
xAxis: {
type: 'category',
name: 'x',
splitLine: { show: false },
data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: '全部',
type: 'line',
data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
},
{
name: '男',
type: 'line',
data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
},
{
name: '女',
type: 'line',
data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart11.setOption(option);
arr.push(myChart11);
myChart12.setOption(option);
arr.push(myChart12);
myChart13.setOption(option);
arr.push(myChart13);
// 给tab导航按钮注册事件,让其渲染
$('#myTab1 li a').on('shown.bs.tab', function (e) {
for (var i = 0; i < arr.length; i++) {
arr[i].resize();
}
});
// 当浏览器窗口大小出现变化时,重新渲染
$(window).resize(function () {
for (var i = 0; i < arr.length; i++) {
arr[i].resize();
}
});

  仅仅只是添加了一个数组,将要渲染的盒子方法添加到数组里边,当事件被触发的时候,通过遍历这个数组,将这些方法再调用一次,这样就可以解决以上问题。

关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题的更多相关文章

  1. java中Double类数字太大时页面正常显示而不要用科学计数法

    /** * 当浮点型数据位数超过10位之后,数据变成科学计数法显示.用此方法可以使其正常显示. * @param value * @return Sting */ public static Stri ...

  2. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Android 常用UI控件之TabHost&lpar;5&rpar;Tab栏在底部且在最上层也不盖tab页

    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...

  4. 面向对象版Tab栏切换

    <div class="wrapper" id="wrapper"> <ul class="tab" id="t ...

  5. JS高级——面向对象方式解决tab栏切换问题

    注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...

  6. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  7. Vue项目中实现tab栏和步骤条的数据联动

    也就是tab栏切换步骤条随之变化 <template>   <div>     <!-- 面包屑导航  -->     <el-breadcrumb sepa ...

  8. 小程序开发顶部TAB栏和侧边分类点击

    先上一个效果图: 根据这个效果图我来说内容. 首先是顶部tab栏 效果实现依靠的是一个组件scroll-view.这个组件很有意思,可以多层嵌套,当然它的属性也很多. 这里主要用的是scroll-x, ...

  9. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

随机推荐

  1. swift 学习(一)基础知识 (基本数据类型,操作符,流控制,集合)

    xcode 中调用API帮助 1.查看简单信息,选中后 按键 control +左键单击  或者按 右侧属性栏 里的帮助按钮 2.完整API,选中后 按键 control +左键双击 3.查看类.函数 ...

  2. CORS Cookie&comma;和nodejs中的具体实现

    CORS(跨来源资源共享协议),高级浏览器(Chrome,firefox, opera, safir, ie10)在 XMLHttpRequest(AJAX) 中已经支持了这个协议.可以实现ajax跨 ...

  3. 查找表或其他对象在某个Server上的存在

    EXEC sp_MSforeachdb 'use ? ;  IF EXISTS(SELECT top 1 1 FROM sys.syscomments WHERE text LIKE ''%test% ...

  4. java 实现数据结构之队列

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,只允许在表的后端(rear)进行插入操作. 1.队列的顺序存储结构及实现 public class SequenceQueue&l ...

  5. PM 时钟机制

    PM 时钟机制 10.1 Minix3 PM 时钟机制概述在 MINIX3 中,除了前面所讲到的 CLOCK 时钟,在 pm 中也是维持了一个时钟, 我们暂且不分析为啥要这么做,我就分析是怎么实现这个 ...

  6. Eclipse使用代码清理功能(Clean Up)

    本文转载自http://www.ibm.com/developerworks/cn/opensource/os-eclipse-clean/ 但是为了适应自己使用,还是自己总结了一下. 一.概述 代码 ...

  7. &period;NET Core的介绍

    ASP.NET5应用程序默认使用.net core来构建应用程序,.net core是一个小的,优化过的.net运行时应用程序. 1. 什么是的.NET Core .NET Core 5 是一由模块化 ...

  8. Maven教程4&lpar;私服-nexus&rpar;

    仓库管理器也叫私服或代理仓库 仓库管理器有两个服务目的:首先它的角色是一个高度可配置的介于你的组织与公开Maven仓库之间的代理,其次它为你的组织提供了一个可部署你组织内部生成的构件的地方. 1Nex ...

  9. &lbrack;Luogu 3258&rsqb; JLOI2014 松鼠的新家

    [Luogu 3258] JLOI2014 松鼠的新家 LCA + 树上差分. 我呢,因为是树剖求的 LCA,预处理了 DFN(DFS 序),于是简化成了序列差分. qwq不讲了不讲了,贴代码. #i ...

  10. es5 - array - concat

    /** * 描述:数组元素合并 * 使用:arr1.concat(arr2) * 参数:arr1.concat(arr2,arr3,arr...) * 说明: * 该concat方法创建一个新数组,该 ...