echarts图自适应窗口只要刷新就会变大，点击进入改变窗口就是正常的。

Question

该怎么让它刷新不要变大，缩放窗口都是正常的，刷新之后变大了，只要改变窗口还是可以用的，重新进入这个页面图也是正常的，只有刷新他会变大，该怎么解决。求解答
刷新前

刷新后

代码：
html:

<div class="home-cont">
      <a-row class="main-tone" type="flex">
        <a-col flex="auto" class="flex-auto" >
          <div style="borderBottom:1px solid #e8e8e8" class="main-head">
            柱形
          </div>
          <div class="echarts-box">
            <div :style="{ height: '424px', width: '100%', backgroundColor: '#f0fff9', }" id="myChart2"></div>
          </div>
        </a-col>
        <a-col flex="auto" class="flex-auto" >
               <!-- 另一个echart -->
        </a-col>
      </a-row>
      <a-row class="main-footer" type="flex">
        <!-- 下部分 -->
      </a-row>
</div>

js：

mounted() {
    this.setChart2();
},
methods:{
    // 柱形
    setChart2() {
      var myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      window.addEventListener("resize", function() {
        myChart2.resize();
      });
      myChart2.setOption({ 
        // 柱形图代码
      });
    },
}

Answer 1

首先我用的就是flex布局，百分比设置完全没有问题，包括他的盒子都是正确的大小。这个问题是只有初次进项目和此页面刷新canvas标签才会变大，canvas不是没有宽高，是宽度变大，高度都是没问题的。
用js获取屏宽，父级盒子宽这些给它绑定也是没有用的。而 media ，要隔二十左右就要设置一次，屏变化，echarts多余的宽也在变。
我项目的解决方法是，在created中加入定时器setTimeout，进来时重新渲染一次echarts。

created() {
    // console.log(this.items);
    this.setChart(this.items, this.cNames);

    this.resizefun = () => {
      this.myChart.resize();
    };

    const _this = this;
    window.addEventListener("resize", () => {
      _this.resizefun();
    });

    this.timer = setTimeout(this.resizefun, 100); // 重新渲染
  },