問題描述：

后臺管理系統(tǒng)，左側的菜單欄是可以展開/收起的，默認是展開，此時頁面上的圖表加載正常，如果收起后再展開，頁面底部就會出現(xiàn)滾動軸，圖表沒有重新繪制。

網(wǎng)上也查了很多方法?；径际峭ㄟ^檢測瀏覽器窗口大小的變化，來實現(xiàn)重新繪制，但是我項目中只是左側菜單欄發(fā)生了展開、收縮，實際瀏覽器?窗口的大小并沒有發(fā)生改變，試了很多都沒效果，如下：

只要窗口大小發(fā)生像素變化就會觸發(fā)

window.addEventListener("resize", () => { this.myChart.resize(); // 窗口發(fā)生改變就更新echarts });

我的解決方法：

1、保存收起/展開?狀態(tài)，當操作?展開/?收起的時候，watch檢測值的變化(我項目中狀態(tài)是存到了store中)

computed:?{

????????redraw() {

? ? ? ? ? ? ? ? return this.$store.state.app.sidebar.redraw

????????}

}

2、監(jiān)測菜單欄的狀態(tài)變化，重新繪制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()? //?重新繪制

????????????????}

????????}

?}

以上代碼，完美解決我項目中遇到的問題。每個人遇到的問題都不太一樣，具體可以多看看，多嘗試