? 這幾天在寫數(shù)據(jù)統(tǒng)計(jì)圖踩蔚,折線圖等等晋辆,使用的是echarts, 因?yàn)槲疫@個(gè)統(tǒng)計(jì)數(shù)據(jù)界面是封裝在一個(gè)組件里面的闰集,然后在選項(xiàng)卡<el-tab-pane> 中調(diào)用
因?yàn)樾枨笫且y(tǒng)計(jì)圖跟著屏幕大小自適應(yīng)勃教,不能寫死兄墅,所以我寬度給了 100% 根據(jù)父視圖的大小來(lái)捎迫。
如下:
給div 定義寬度為100%之后 然后在?mounted() 方法去聲明一個(gè)頁(yè)面監(jiān)聽方法 這樣頁(yè)面改變了 就會(huì)觸發(fā)事件
這樣設(shè)置之后 圖表的大小確實(shí)會(huì)根據(jù)頁(yè)面的大小進(jìn)行自適應(yīng)晃酒,但這個(gè)時(shí)候存在一個(gè)問(wèn)題,就是頁(yè)面剛初始化的時(shí)候立砸,圖表剛開始默認(rèn)大小是100px 特別的小掖疮,然后再去拉動(dòng)頁(yè)面的大小后 立馬又正常了。
如下:
因?yàn)轫?yè)面剛初始化的時(shí)候颗祝,圖表的頁(yè)面是放在選項(xiàng)卡<tabs>里面的 在選項(xiàng)卡切換的時(shí)候浊闪,頁(yè)面在渲染恼布,圖表頁(yè)面拿不到父視圖的大小所以給默認(rèn)了一個(gè)100px的寬高。
解決這個(gè)問(wèn)題的方案就是 延遲選項(xiàng)卡切換時(shí)的頁(yè)面渲染
在選項(xiàng)卡上添加 layz
如下:
這樣就解決了 頁(yè)面初始化 圖表很小的問(wèn)題
還有一種方法就是?可以借用v-if在切換的時(shí)候使echart圖重新渲染