解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
2024-08-26 21:18:54
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文件最后面加上如下所示代码即可。
//解决切换tab,非默认的柱状图表格不显示问题
$(function(){
//console.log(charts);//打印显示是否添加进去
$(window).resize(function() {
for(var i = ; 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 = ; i < charts.length; i++) {
charts[i].resize();
}
}); })
然后呢,你点击你的tab切换,就可以看到报表可以正常显示了的。
待续.....
最新文章
- linux安装nexus
- Maven学习随笔二——Maven初始配置
- display的理解
- [C#]集合已修改;可能无法执行枚举操作
- 分布式HBase-0.98.4环境搭建
- LINUX信息安全系统设计基础第一周学习总结
- javaee中的中文乱码处理
- mvc checked=\";checked\";
- 【Maximum Depth of Binary Tree 】cpp
- JBoss7配置指南
- TexturePacker license Key免费获取方式
- javascript权威指南笔记[6-8]
- @Async异步注解与SpringBoot结合使用
- 机器学习--Logistic回归
- cocos 主循环
- KEGG数据库介绍
- Excel 2010 最熟悉的陌生功能:筛选器(将当前所选内容添加到筛选器)
- php面向对象基础知识点总结
- struts2中各个jar包作用 (转)
- R中去除为NA的行--转载
热门文章
- ExcelTools使用
- [模板] 数学基础:快速幂/乘/逆元/exGCD/(ex)CRT/(ex)Lucas定理
- css 溢出overflow
- oracle 查询数据库的各种命令
- python之模块之shutil模块
- nodejs和npm的关系【转】
- JGUI源码:Accordion折叠到侧边栏实现(6)
- 多人聊天室(Java)
- [译]Ocelot - Delegating Handlers
- 边框回归(bounding-Box regression)