首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >tab标签页切换时Echarts加载不正常的问题

tab标签页切换时Echarts加载不正常的问题

作者头像
别团等shy哥发育
发布2023-02-25 16:39:54
发布2023-02-25 16:39:54
2.7K0
举报

切换tab选项卡时Echarts加载不正常的问题

一、问题描述

我有两个选项卡,一个用来显示Echarts图表,一个用来显示Echarts图表的数据源

但是我切换到数据源的选项卡后再改变浏览器窗口大小时,这是再切换回echarts图表的选项卡就会出现:

可以看到,图形渲染失败了

二、解决方案:

代码语言:javascript
复制
	var charts=[];
    var injectionWaterChart=echarts.init(document.getElementById('echarts_InjectionWater'));
    var pressChart=echarts.init(document.getElementById('echarts_Press'));
    var createDaysChart=echarts.init(document.getElementById('echarts_CreateDays'));
    charts.push(injectionWaterChart);
    charts.push(pressChart);
    charts.push(createDaysChart);
    //解决tab切换后改变窗口大小时不显示问题 在加载窗口后重新渲染。
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var activeTab = $(e.target)[ 0 ].hash;
        if (activeTab=='#tab-1'){
            for(var i=0;i<charts.length;i++){
                charts[i].resize(); //适应div大小
            }
        }
    });   //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择

就是再次切换回图表选项卡的时候,调用restore()方法,将图表数据还原即可,那个tab-1是我图表选项卡中tab标签的id。

三、拓展

参考链接:https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 切换tab选项卡时Echarts加载不正常的问题
  • 一、问题描述
  • 二、解决方案:
  • 三、拓展
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档