1. 定义一个变量值为屏幕宽度
2. mounted时给window绑定一个resize事件,更新屏幕宽度变量
3. 监听该变量,触发想要的动作
data() {
return {
screenWidth: document.body.clientWidth,
}
},
mounted() {
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
$this.screenWidth = window.screenWidth
})()
}
},
watch: {
screenWidth(val) {
this.$refs.myChart.resize()
},
},
echarts 的resize方法可以重新绘制宽度,若不需要重新绘制宽度,可以使用
this.$refs.myChart.clear()
this.$refs.myChart.setOption(this.echartsData)
这样的话就宽度不会变化,而仅是绘制图表内容。