问题描述：
后台管理系统，左侧的菜单栏是可以展开/收起的，默认是展开，此时页面上的图表加载正常，如果收起后再展开，页面底部就会出现滚动轴，图表没有重新绘制。
网上也查了很多方法。基本都是通过检测浏览器窗口大小的变化，来实现重新绘制，但是我项目中只是左侧菜单栏发生了展开、收缩，实际浏览器 窗口的大小并没有发生改变，试了很多都没效果，如下：
只要窗口大小发生像素变化就会触发
window.addEventListener("resize", () => { this.myChart.resize(); // 窗口发生改变就更新echarts });
我的解决方法：
1、保存收起/展开 状态，当操作 展开/ 收起的时候，watch检测值的变化(我项目中状态是存到了store中)
computed: {
redraw() {
return this.$store.state.app.sidebar.redraw
}
}
2、监测菜单栏的状态变化，重新绘制echart图表
watch: {
redraw() {
this.$nextTick(() => {
this.initEachertsDate()
})
}
}
methods: {
initEachertsDate() {
let option = { ... 中间省略图表的配置项...}
if (this.$refs.echarts) {
const myCharts = this.$echarts.init(this.$refs.echarts)
myCharts.setOption(option)
myCharts.resize() // 重新绘制
}
}
}
以上代码，完美解决我项目中遇到的问题。每个人遇到的问题都不太一样，具体可以多看看，多尝试