Bob's Blog

问题是：使用bootstrap4，echarts5，使用了bootstrap的nav-tabs，图表在切换为第二个tab时展示。但是当切换tab时，发现图表无法正常显示。先是不显示，在查看元素属性时，发现高宽都是0。于是设置了style="width:100%; height: 400px"，期望能利用bootstrap的栅格系统来调整图表的显示宽度，但是发现图表的width却变成了100px。

其实网上有这类的问题，但他们的方法均不可行。

现在是先有两个tab：

<ul class="nav nav-tabs justify-content-center" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">主页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#charts">图表</a>
    </li>
</ul>

图表默认在点击第二个tab时加载显示。

<div id="charts" class="container-fluid tab-pane"><br>
    <h3>在这里看图表分析</h3>
    <p>这里会展示不同周期和不同类别的图表分析</p>
    <div class="row">
        <div class="col-lg-6 mb-6" id="monthly-charts">
            <h5>当月汇总信息</h5>
            <div id="monthly-bar-chart" style="width:100%; height: 400px"></div>
        </div>
    </div>
</div>

点击第二个tab时，其他的元素比如文本按钮之类的都可以显示出来，但图表没有继承到父节点的宽度，而是被转换成了100px。这是因为使用bootstrap的栅格时，因为echarts 是使用容器的clientWidth和clientHeight 获取高宽的，在元素没准备好是无法获取容器大小的。就会出现把width: 100%转为100px的情况。

然后有的人提到的解决方式是：等待页面加载完成；$(window).trigger('resize'); chart.rezise(); 切换时获取父节点的widht来动态修改图表的width；但试了后都不行。

最后解决是来自stackoverflow的一个答案： issue-with-displaying-google-chart-in-a-bootstrap-tab

While implementing the charts, graphs inside the tabs, the content resize issue may occur.

Reason for this type of issue

In Bootstrap tab, while we switching tabs only the active tab will have the property display: block; rest of the tab-contents are applied to display: none;.

This is the major cause of this issue if the div element has a property display: none;, there the width is also considered as 0px.

To override this issue I have added the following CSS, Instead of hiding the tabs by using display: none;, I handled with height & overflow property by this method the width will not set to 0px.
CSS

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

Thanks.

Note: This is one of the methods to resolve this issue using CSS.

只有当前所处的tab会带有display: block，其他的都是display: none。于是无法获取到期望的正常width。于是通过覆盖tab-content的css来达到了目的，图表写明100%也能获取到正常的宽度了。