echarts散點圖 不顯示問題 或寬度為0問題

昨天遇到一個奇怪問題：在搜狗瀏覽器、QQ瀏覽器 ，echarts散點圖不顯示。

F12發現寬度變成了0；

但在 谷歌、360瀏覽器 顯示正常。

后來以為是 tabs切換時 v-if 、v-show渲染問題；改成 v-if 還是不行。

后來每次切換 都resize，還是不行。

最后發現 是Layout問題，刪除tabs 里面的layout就好了。

 

    <div >

        <Layout>

            <Sider  v-bind:width="230">
                <Card style="width:100%;height:100%" v-bind:padding="0" class="full-card">
                    <div class="nav-tree">
                        <Tree v-bind:data="data1" ref="tree" v-on:on-select-change="treeClick"></Tree>
                    </div>
                </Card>
            </Sider>
            <Layout>
                <Content >
                    <Tabs v-bind:value="activeKey" v-on:on-click="tabsClick" v-bind:animated="true" ref="tabs" >
                        <Tab-pane label="動物列表" name="key1" v-bind:index="1">
                        </Tab-pane>
                        <Tab-pane v-if="show2" label="動物詳情" name="key2" v-bind:index="2">

                        </Tab-pane>
                        <Tab-pane label="入侵分布" name="key3" v-if="showMap" v-bind:index="3">
                             <!-- <Layout>
                                <Content>-->
                                    <div ref="animalMapID" style="width:100%;height:100%">  </div>
                               <!--   </Content>
                            </Layout>-->
                        </Tab-pane>

                    </Tabs>
                   
                </Content>
            </Layout>
        </Layout>
    </div>