【vue】echarts 自适应

<template>
  <div ref="chart" style="width:100%"></div>
</template>

<script>
export default {
  props:{
    options:{
      type:Object,
      required:true
    }
  },

  data(){
    return{
      chart:null

    }
  },
  methods:{
    async initChart() {
      let dom = this.$refs.chart ;
      await Promise.resolve();
      this.chart = this.$echarts.init(dom);
      this.chart.setOption(this.options);
    },
    set(options){
      this.chart?.setOption(options)
    },

    /** 图表自第适应 */
    resizeHandle(){
      this.chart.resize()
    }
  },
  mounted(){
    this.initChart();
    /* 窗口变化时自适应 - 监听窗口变化 */
    window.addEventListener('resize',this.resizeHandle)
  },
  destoryed(){
    /* 窗口变化时自适应 - 组件被注销时，缩放函数是匿名函数，且仍然在事件监听列表中，
    因此匿名函数和匿名函数中用到的外部变量在组件注销后均不会被清理。
     所以要手动清理 */
    window.removeEventListener('resize', this.resizeHandle)
  },

}
</script>

<style>

</style>