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>