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); // 重新渲染
  },
  

Answer 2

width:100%的问题~

Answer 3

echarts-box设置个宽度

Answer 4

可能是你使用了flex布局并且echart的容器没有设置宽度导致的，建议你尝试一下设置好容器的宽度和flex-grow、flex-shrink为0和flex-basis设置为容器的宽度

Answer 5

我也是这个问题，真的是醉了，在当前页面，刷新，然后echart图的宽度就会比父元素宽，echart图的宽度也是width：100%，真的不知道是哪一步出了问题，唉

Answer 6

这个问题我今天用antd也遇到了研究了一下

首先原因就是对于这些ui框架，content默认初始化的宽度都是100vw 然后会通过js去设置实际宽度（100vw-侧边栏宽度），这里假设侧边栏是100px.

于是我就遇到了一个现象，跳转路由后content里面的echart宽度是正常的，但是一刷新，content里面的echart就会变大，因为跳转后侧边栏已经存在了，ehcarts宽度是100vw-100px，但是一刷新，content从新变会100vw，这时候echart宽度就是100vw，然后content再由ui框架的代码控制宽度变为100vw-100px，看起来就是echart变大了。

解决方法也很简单，就是延迟初始化图表，我延迟了50ms就Ok了