vue项目中使用vue-echars绘制图表时,需要实时根据窗口大小调整图表的大小,我使用的auto-resize属性,没有作用,没有找出错误在哪里,使用window.onresize事件,必须销毁才不会报错哦,代码如下:

<template>
    <chart ref="chart1" :options="orgOptions"></chart>
</template>
<script>
export default {
  data() {
    return {
      orgOptions: {}
    };
  },

  created() {
    this.orgOptions = {
      xAxis: {
        type: "category",
        data: ""
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: "",
          type: "line"
        }
      ]
    };
  },
  mounted() {
    /*窗口自适应,关键代码*/
    window.onresize = () => {
      this.$refs.chart1.resize();
    };
  },
    //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  }
}

注意:

1、window.onresize事件一般放在created或者mounted生命周期中。

2、window.onresize中的this指向的是window,不是指向vue,如果需要调用methods中的函数,需要在window.onresize事件的前面把指向vue的this赋值给其他字符,比如"_this";或者使用箭头函数。

3、由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在出这个界面时注销window.onresize事件。

4、window.onresize说明一个问题:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。

 

Logo

前往低代码交流专区

更多推荐