问题描述:
监听可视窗口区域变化时,如框架侧边栏隐藏。隐藏侧边栏,空白区域增加,resize的图却没有变大。隐藏后展开侧边栏,空白区域减少,resize的图变得更大,这显然是不合理的。
代码如下
export default{
data(){
return{
chart:null,
//配置项省略
option:{...}
},
methods:{
//echart初始化
echartsInit(){
this.chart = echarts.init(document.getElementById('decAmount'),'macarons')
this.chart.setOption(this.option)
}
},
mounted(){
//挂载到mounted上初始化
this.echartsInit()
},
watch:{
'isCollapse'(val){
//监听isCollapse属性,当该值变化时说明窗口大小发生了变化
this.chart.resize()
}
}
}
问题详细描述
应效果不一致的原因是因为,框架的侧边栏收起是一个动态隐藏的效果,侧边栏隐藏时,触发了resize,但是窗口大小还未变化,所以不变大,侧边栏隐藏后,窗口变大了 ,再次监听,resize以为空白区域更多了,因此变大
解决办法
在resize的地方设置定时,等到侧边栏(隐藏/展开)完成后再调用resize()
watch:{
'isCollapse'(val){
setTimeout(()=>{
this.chart.resize()
},500)
}
}