weixin_58412143 2022-03-18 10:53 采纳率: 91.6%
浏览 210
已结题

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

问题——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%;
  }
  • 写回答

2条回答 默认 最新

  • yhanw 2022-03-18 11:10
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月31日
  • 已采纳回答 3月23日
  • 创建了问题 3月18日