需求:如下图所示,收起侧边菜单栏后echarts图表需要根据新的宽高重新绘制
结果:echarts resize方法成功调用,但结果不符合预期,如下图所示:
错误代码:
watch: {
'$store.state.app.sidebar': { // 监听侧边菜单栏的点击
handler(oldVal, newVal) {
this.resize() // 错误代码
},
deep: true
}
},
mounted () {
this.setEchart(this.lineOption, this.pieOption)
window.addEventListener('resize', () => {
this.resize()
})
},
methods: {
setEchart(value1, value2) {
this.statisticsLeftChart = echarts.init(document.getElementById('statisticsLeftChart'))
value1 && this.statisticsLeftChart.setOption(value1)
this.statisticsRightChart = echarts.init(document.getElementById('statisticsRightChart'))
value2 && this.statisticsRightChart.setOption(value2)
},
resize() {
this.statisticsLeftChart.resize()
this.statisticsRightChart.resize()
},
}
原因:本项目中侧边菜单栏收起/展开时有动画效果,而此时监听侧边菜单栏按钮的点击并调用resize方法时,侧边菜单栏的动画效果还没有结束,容器的宽高还是保持不变的,此时resize方法被立即调用(也就是动画效果使得页面元素的宽高改变有延迟,导致resize方法的调用在页面元素宽高改变前),重新绘制的动作开始但获取到的“新”容器宽高其实还是“旧”的,当侧边菜单栏的动画执行完毕后,“旧图表”显示在新元素上,造成了上图所示的留有空白。因此,只需让侧边菜单栏收起/展开时的动画效果完成,所有元素有了新的宽高以后,再执行resize方法,此时resize方法获取到的新容器宽高就是我们想要的了。即确保resize方法调用时所有的相关元素已经有了新的宽高。
正确的代码:
watch: {
'$store.state.app.sidebar': {
handler(oldVal, newVal) {
setTimeout(() => {
this.resize()
}, 500) // 定时器具体时间可做更精确的计算
},
deep: true,
}
},