echarts自适应后当窗口变化时图表宽高才正常

Question

问题——echarts自适应后当窗口变化一次后图表宽高才正常，但是刚进页面的时候时是小图宽高不对，为什么呢

  <div class="Pbody" id="PmyChart">
    <Echart :options="options" id="PtopLeftChart" ></Echart>
  </div>
return{
        PmyChart:null,
}
mounted() {
      this.initEcharts()
    },
initEcharts() {
        let PmyChart = document.getElementById("PtopLeftChart");
       PmyChart.style.width = 57 + "rem"; //初始化echarts图表宽度
        PmyChart.style.height = 23 + "rem";
        this.PmyChart = this.$echarts.init(PmyChart);
        this.PmyChart.setOption(this.options);
        let self = this;
        window.addEventListener("resize", () => { // 通过resize方法来重设图表宽度
          let PmyChart = document.getElementById("PtopLeftChart");
         PmyChart.style.width = 57 + "rem"; //初始化echarts图表宽度
        PmyChart.style.height = 23 + "rem";
          self.PmyChart.resize();
        });
      },
 .Pbody {
    height: 380px;
    width: 100%;
  }

Answer 1

可能是获取dom绘制时布局还没有完成，获取到的宽高不正确。将this.initEcharts()放入$nextTick()试试
mounted() {
this.$nextTick(() => { this.initEcharts() })
}