H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

代码:
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({ 
        // 柱形图代码
      });
    },
}

回答:

首先我用的就是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); // 重新渲染
  },
  

回答:

width:100%的问题~

回答:

echarts-box设置个宽度

回答:

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

回答:

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

本文地址:H5W3 » echarts图自适应窗口只要刷新就会变大,点击进入改变窗口就是正常的。

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址