专栏首页别先生解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

解决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 条评论
登录 后参与评论

相关文章

  • SpringCloud的入门学习之Netflix-eureka(Eureka的集群版搭建)

    1、Eureka单机版的话,可能会出现单点故障,所以要保障Eureka的高可用,那么可以进行搭建Eureka的集群版。

    别先生
  • Hibernate api 之常见的类(配置类,会话工厂类,会话类)

    1:Configuration :配置管理类对象   1.1:config.configure():      加载主配置文件的方法(hibernate.cfg...

    别先生
  • 使用Java封装的分页工具类

    1、分页的插件也有很多,比如PageHelper,这种后端分页框架,将数据都查询出来,设置一下起始页,每页显示的数据就行了,操作起来十分方便。还有前端分页插件,...

    别先生
  • C语言游戏外挂:一个简单的内存外挂

    通过 C 语言编写一个简单的外挂,通过 API 函数修改游戏数据,从而实现作弊功能

    诸葛青云
  • C语言游戏外挂:一个简单的内存外挂

    通过 C 语言编写一个简单的外挂,通过 API 函数修改游戏数据,从而实现作弊功能

    闫小林
  • AI也懂印象派:像梵高一样创作艺术作品并参赛

    参加2018年RobotArt比赛的参赛作品已经展出。前10名参赛队伍已公布,现在可以在网上画廊看到机器人画家令人印象深刻的作品。

    AiTechYun
  • GlobalPlatform及其组织介绍

    GlobalPlatform(GP)是跨行业的国际标准组织,致力于开发、制定并发布安全芯片的技术标准,以促进多应用产业环境的管理 及其安全、可互操作的业务...

    安智客
  • TencentOS tiny 移植到STM32F103全教程(基于标准库)

    STM32的裸机工程模板直接使用野火STM32开发板配套的固件库例程即可。可以从我github上获取https://github.com/jiejieTop/T...

    杰杰
  • winform 设置 combobox.text 无法显示问题

    winform 设置 combobox.text 无法显示问题:不能够直接对 combobox.text 进行设置,需要先设置combobox.datasour...

    Venyo
  • 通过Java程序提交通用Mapreduce任务并获取Job信息

    背景 我们的一个业务须要有对MR任务的提交和状态跟踪的功能,须要通过Java代码提交一个通用的MR任务(包括mr的jar、配置文件、依赖的第三方jar包),并且...

    囚兔

扫码关注云+社区

领取腾讯云代金券