大屏图表自适应

在mian.jsZ中引入

// 图表自适应
Vue.prototype.$echartsResize = function(ref) {
    window.addEventListener("resize", function() {
        ref.resize();
    });
};

页面

  data() {
    return {
      contentStyleObj: {
        height: ""
      }
    };
  },
  mounted() {
    //获取页面高度自适应：
    this.getHeight();
  },
  //获取页面高度自适应：
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  //获取页面高度自适应：
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    //获取页面高度自适应：
    getHeight() {
      this.contentStyleObj.height = window.innerHeight + "px";
    },
}

图表中使用

this.$echartsResize(myChart);

html

<div class="content" :style="contentStyleObj"></div>