npm install element-resize-detector

<template>
  <transition>
    <div v-resize="DomResize">
    </div>
  </transition>
</template>

<script>
export default {
  directives: {
    resize: {
      // 指令的名稱
      bind(el, binding) {
        // el為綁定的元素，binding為綁定給指令的對象
        // console.log(el, '綁定', binding)
        let width = ''
        let height = ''
        function isResize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value({ width: style.width, height: style.height }) // 關(guān)鍵(這傳入的是函數(shù),所以執(zhí)行此函數(shù))
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isResize, 300)
      },
      unbind(el) {
        // console.log(el, '解綁')
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  methods:{
    DomResize(data) {
      // const { width, height } = data
      // console.log('width:', width, 'height:', height, '   dom尺寸方式改變')
    }
  }
}
</script>

npm install element-resize-detector

import elementResizeDetectorMaker from ‘element-resize-detector';
var erd = elementResizeDetectorMaker(); //創(chuàng)建實(shí)例

mounted() {
    //監(jiān)聽id為box的元素 重繪echarts
    erd.listenTo(document.getElementById("box"),(element)=>{
        var width = element.offsetWidth;
        var height = element.offsetHeight;
         that.$echarts.init(document.getElementById('xxxx')).resize();
    });
},
beforeDestroy(){
    //離開頁面刪除檢測器和所有偵聽器
    erd.uninstall(this.$refs.box); //這里用ref是因?yàn)関ue離開頁面后獲取不到dom
}