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

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切换,就可以看到报表可以正常显示了的。

待续.....

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

前端程序员表白神器

2882
来自专栏河湾欢儿的专栏

性能优化

1041
来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

26310
来自专栏大前端开发

微信小程序新增拖动组件:movable-view

小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图...

1424
来自专栏梧雨北辰的开发录

Xcode报错问题总结

1. InValid Device State ? 原因:同时安装了Xcode7和Xcode8等多个版本,在交替使用的时候会出现上诉错误提示。 解决:关闭所有...

3259
来自专栏陈满iOS

Xcode最新及各历史版本安装方法·官方镜像下载地址

个人看法,从重复利用的角度,不推荐用AppStore安装和更新,推荐直接去官网的历史版本下载资源页面下载,这样下载之后还能有版本备份,等下次再需要的时候还能重复...

3.2K2
来自专栏优启梦

给网站添加好看的底部功能按钮

在一些博客手机版会看到底部有些按键很好看! 跟下面图片的一样,把代码自行添加到合适位置就可以了!。 只在手机版显示 ? <style type="text/cs...

3998
来自专栏技术墨客

Next.js入门教程 原

参考代码:https://github.com/chkui/nextjs-getting-started 。

6522
来自专栏Core Net

C# 处理Word自动生成报告 一、概述

3747
来自专栏娱乐心理测试

小程序设置启动页面

6026

扫码关注云+社区

领取腾讯云代金券