Echarts 图表放到bootstrap的tab-panel中不加载

最新推荐文章于 2024-06-07 10:28:47 发布

i秋风伴落叶

最新推荐文章于 2024-06-07 10:28:47 发布

阅读量1.5k

点赞数 1

分类专栏： HTML5 移动报表 echart/ hightCharts/Chart

本文链接：https://blog.youkuaiyun.com/zxf1242652895/article/details/54944331

版权

HTML5 同时被 3 个专栏收录

14 篇文章

订阅专栏

echart/ hightCharts/Chart

14 篇文章

订阅专栏

移动报表

9 篇文章

订阅专栏

本文介绍了一个关于TabPanel中Echarts图表无法正常显示的问题及其解决方案。通过调整CSS样式来确保图表组件能够在隐藏的标签页内正确加载和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 /* tab panel 不显示Echarts  图表问题   */ 
 
 /* bootstrap hack: fix content width inside hidden tabs */ 
 
 .tab-content > .tab-pane, 
 
 .pill-content > .pill-pane { 
 
      
 display 
 :  
 block 
 ;      
 /* undo display:none          */ 
 
      
 height 
 :  
 0 
 ;           
 /* height:0 is also invisible */ 
 
      
 overflow-y:  
 hidden 
 ;  
 /* no-overflow                */ 
 
 } 
 
 .tab-content > .active, 
 
 .pill-content > .active { 
 
      
 height 
 :  
 auto 
 ;        
 /* let the content decide it  */ 
 
 }  
 /* bootstrap hack end */ 