Echars自适应

<template>
  <div :id="id" class="fullBox"></div>
</template>
<script>
// import echarts from "echarts";
export default {
  props: ["option"],
  data() {
    return {
      id: undefined,
      echartInstance: undefined,
      resizeObserver: undefined,
      listener: undefined,
    };
  },
  watch: {
    option(newVal) {
      this.echartInstance.setOption(newVal);
    },
  },
  mounted() {
    let element = document.getElementById(this.id);
    this.echartInstance = this.$echarts.init(element);
    this.echartInstance.setOption(this.option);
    // 解决div大小变化导致的echart错位问题
    if (ResizeObserver) {
      this.resizeObserver = new ResizeObserver((entries) => {
        for (let i of entries) {
          if (i.target === element) {
            this.echartInstance.resize();
          }
        }
      });
      this.resizeObserver.observe(element);
    } else {
      this.listener = (ev) => {
        if (ev.target === window) {
          this.echartInstance.resize();
        }
      };
      document.addEventListener("resize", this.listener);
    }
  },
  created() {
    this.id = Array.from(crypto.getRandomValues(new Uint8Array(8)))
      .map((val) => {
        let string = val.toString(16);
        return string.length < 2 ? "0" + string : string;
      })
      .join("");
  },
  beforeDestroy() {
    if (this.echartInstance) {
      this.echartInstance.dispose();
    }
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.listener) {
      document.removeEventListener("resize", this.listener);
    }
  },
};
</script>
<style lang="scss" scoped>
// 撑到最大。canvas大小请在外层div控制
.fullBox {
  height: 100%;
  width: 100%;
}
</style>