首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

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

作者头像
别先生
发布2018-12-14 17:15:38
2.1K0
发布2018-12-14 17:15:38
举报
文章被收录于专栏:别先生别先生

1、参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981

问题描述:在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。(这里暂时未考虑自适应问题)。

由于使用的格式和参考不一样,所以自己贴一下,方便自己以后使用。

2、在js文件页面最上面定义一个js数组。如var charts = new Array(); 因为我的主页是根据$(function(){  ..... })。 然后在里面.....位置写了如下所示的,使用调用方法进行处理的。

chart5 = ec.init(document.getElementById('chart5'));
barChart2(data2, chart5, "xxxx");

具体这里不再展示。

3、然后呢,在你调用的方法,最下面加上charts.push(chart);即可。

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

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

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

然后呢,你点击你的tab切换,就可以看到报表可以正常显示了的。

待续.....

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-11-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档