使用element-resize-detector监听div的大小改变时候多个echarts无法实现resize_element-resize-detector取消监听

当视图中只有一个echarts时候，使用element-resize-detector监听父级元素大小改变时候，echarts使用自身的resize()方法是可以实现图表大小重绘的，但是当在网页中添加了多个echarts，并且class类名都一样，发现element-resize-detector只能实现第一个echarts的图表重绘，尝试了一天找了各种方法，最后还是this.$el好使，可能不是最好的一个方法，但确实解决了自己的问题，记录一下。

这种方法适合组件中根div作为echarts容器

<template>
  <div :class="className" />
</template>
1
2
3

下载工具包

npm install element-resize-detector
1

引入工具包在组件中使用或者在单独的js中使用

import resizeDetector from 'element-resize-detector'
1

方法

chartResize() {
  let erd = resizeDetector()
  erd.listenTo(this.$el, () => {
    this.chart.resize()
    console.log('chart resize')
  })
}
1
2
3
4
5
6
7

resize.js

import resizeDetector from 'element-resize-detector'

export default {
  mounted() {
    this.chartResize()
  },
  methods: {
    chartResize() {
      let erd = resizeDetector()
      erd.listenTo(this.$el, () => {
        this.chart.resize()
        console.log('chart resize')
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16