【Vue】监听div宽高的变化（动态渲染echarts宽高）

一、问题

echarts 未监听到 echarts 宽高变化而动态变化

<template>
 <div id="echart" ref="echart" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
export default {

data() {

  return {

      myChart: null,

  }

},

mounted() {

  this.initEcharts()

},

methods:{

   initEcharts(){

   this.myChart = this.$echarts.init(this.$refs.echart)

   this.handleResize()

   var echartOptions ={

    // 设置echarts的options

   }

   this.myChart.setOption(echartOptions)

    },

   

   // 监听div宽高的变化（动态渲染echarts宽高）

    handleResize() {

      const resizeObserver = new ResizeObserver((entries) => {

        // entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息

        for (const entry of entries) {

          const { width } = entry.contentRect

          // 根据外部盒子的宽度来设置echarts图的宽度

          this.myChart.resize({ width })

        }

      })

      // 开始监听最外层的 resizeTarget 元素的大小变化

      const resizeTarget = this.$refs.echart

      resizeObserver.observe(resizeTarget)

      // 在组件销毁时停止监听，防止内存泄漏

      this.$once('hook:beforeDestroy', () => {

        resizeObserver.disconnect()

      })

    },

},

   beforeDestroy() {

      if (this.myChart) {

        this.myChart.dispose()

      }

    },
</script>