昨天遇到一個奇怪問題:在搜狗浏覽器、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>
樹立目标,保持活力,gogogo!