echart Adaptive (адаптация), изменение размера

this.myChart = echarts.init(document.getElementById('firm_chart'))
window.addEventListener("resize", this.chartResize);

chartResize() {
    
    
  this.myChart.resize()
},

beforeDestroy() {
    
    
  window.removeEventListener("resize", this.chartResize);
},

Мультидиаграммный адаптивный:

mounted() {
    
    
  window.addEventListener("resize", this.chartResize);
},

beforeDestroy() {
    
    
   window.removeEventListener("resize", this.chartResize);
 },

chartResize() {
    
    
   this.myChart.resize()
   this.myChart2.resize()
 },

Проблема: после скрытия боковой панели диаграмма не имеет адаптивного контейнера;
решение:

1. Сохраните скрытое состояние боковой панели, vuex или других мест, я храню его здесь в vuex.

//展开和收缩
toggleCollapse(){
    
    
    this.isCollapse=!this.isCollapse
    // 存到Vuex中
    this.$store.dispatch("setIsCollapse", this.isCollapse);
},

2. На странице или компоненте, где вам нужна адаптивная диаграмма, прослушайте значение в vuex. Если статус боковой панели (скрытой или отображаемой) изменится, перерисуйте диаграмму echarts.

watch:{
    
    
    '$store.getters.getIsCollapse'(value){
    
    
      console.log(value)
        setTimeout(() => {
    
    
          this.chartResize()
        }, 50)
    }
  },

Примечание. Если часы не добились эффекта, можно попробовать увеличить время setTimeout.