Echart图表收起/展开后无法重新渲染实现自适应（亲测有效）-开发bug总结5

问题描述：

后台管理系统，左侧的菜单栏是可以展开/收起的，默认是展开，此时页面上的图表加载正常，如果收起后再展开，页面底部就会出现滚动轴，图表没有重新绘制。

网上也查了很多方法。基本都是通过检测浏览器窗口大小的变化，来实现重新绘制，但是我项目中只是左侧菜单栏发生了展开、收缩，实际浏览器 窗口的大小并没有发生改变，试了很多都没效果，如下：

只要窗口大小发生像素变化就会触发

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()  // 重新绘制

                }

        }

 }

以上代码，完美解决我项目中遇到的问题。每个人遇到的问题都不太一样，具体可以多看看，多尝试