vue中把echart封装为组件后多次引用，只有第一个可以resize

在项目中一个页面需要使用8、9个相似的echart图,大概可以分为两种：饼图和柱状图。本着不想多写代码的原则，我把饼图和柱状图分别封装了两个组件，然后多次引用。
引用之后效果实现了，但是在改变浏览器窗口大小的时候，多个饼图和柱状图的resize()方法分别只有第一个可以生效，其他的都不生效。
问题代码和效果图如下：

问题.gif

上面的代码是其中一个封装的echart组件，可以看到在浏览器窗口大小发生变化时，只有第一个饼图和第一个柱状图的大小发生了变化
问题原因：在一个页面中调用同一个封装了echart的组件多次之后，在resize时只能获取到第一个echart实例，其他的获取不到,所以只能使第一个echart实例尺寸发生变化
解决办法

问题解决.gif

这样问题就解决啦

完美解决方案:
按评论区老哥的方法试了下，上述问题完美解决：

    mounted() {
      this.initChart();
      this.resize = throttle(() => {
        this.chart && this.chart.resize()
      }, 100);
      window.addEventListener('resize', this.resize);
    },

    methods: {
      // resize: throttle(function() {
      //   this.chart && this.chart.resize()
      // }, 100),

      initChart() {
        this.chart = echarts.init(document.getElementById(this.chartId));
        this.chart.setOption(this.option)
      }
    }

与之前相比，把resize方法写到了mounted中，完美解决

完美解决.gif