Echart图表大小随div宽度自适应

Echarts v5.3.2 + vue v2.6.10

echartsInstance.resize()：改变图表尺寸，在容器发生大小改变时需手动调用

• echart实例中的resize是针对window窗口大小发生变化时图表自适应，见图一。
• 而div宽度大小发生变化时resize并不起作用，见图二。
• 经搜索发现new ResizeObserver接口可监听Element内容区域或SVGElement边界改变，对观察的元素大小变化做出反应，进而调用echartsInstance.resize()方法实现 Echart图表大小随div宽度自适应，见图三。

图一：

图二：

图三：

<template>
    <div ref="domChart" class="barchart-container"></div>
</template>

import echarts from '@/lib/echarts'
export default {
  return {
    data() {
      return {
        chartData: [],
        instanceChart: null,
        resizeObserver: null
      }
    },
    beforeDestroy() {
        this.disposeBarChart()
        window.removeEventListener('resize', this.resizeChart)
        this.resizeObserver.disconnect()
    },
    created() {
        window.addEventListener('resize', this.resizeChart)
    },
    mounted() {
        this.initChart()
        // this.fetchChartData() 请求图表的数据
    },
    methods: {
      initChart() {
        this.instanceChart = echarts.init(this.$refs['domChart'])
        /**
         * 实现图表大小随div宽度大小resize的关键代码。
         * [兼容性详见](https://caniuse.com/?search=ResizeObserver)
         */
        this.resizeObserver = new ResizeObserver(() => this.instanceChart?.resize())
        this.resizeObserver.observe(this.$refs['domChart'])
      },
      resizeChart() {
        this.instanceChart?.resize()
      },
      disposeBarChart() {
        if (this.instanceChart) {
          this.instanceChart.dispose()
          this.instanceChart = null
        }
      }
    }
  }
}