vue3 根据dom大小动态改变Echarts图表-自定义指令

Echarts的图表是用canvas绘制的，canvas需要事先给定一个宽度，当装这个图表的容器元素大小发生改变时，canvas的大小不会随之改变，所以需要手动操作一下。
最开始查到h5的方法Mutation Observer可以监听dom的属性变化，但是不知道是否由于用了百分比自适应的关系，没有监听生效，于是放弃了这个方法。。

后面查到可以使用指令监听dom的宽高变化，结合项目修改了一下：
自定义指令代码：

//这里是注册的全局指令
export default {
  name: 'resize',
  mounted(el: HTMLElement, binding: any) {
    // 定义宽高
    let width = '';
    let height = '';
    function getSize() {
      const style = (document.defaultView as any).getComputedStyle(el);
      // 如果当前长宽和历史长宽不同，触发指令函数
      if (width !== style.width || height !== style.height) {
      // binding.value在这里就是下面的resize函数，触发指令对应的函数并传递参数
        binding.value({ width, height });
      }
      width = style.width;
      height = style.height;

    }

    el._vueDomResize = setInterval(getSize, 100);
  },
  //卸载时清楚定时任务
  unmounted(el: HTMLElement) {
    clearInterval(el._vueDomResize);
  },
};

组件代码：

//外层盒子
 <div v-resize="resizeChart" >
  <div id="charts" style="width:100%">
 <div>

  ...
 // 外层盒子宽高变化后resize图表宽高
    const resizeChart = (size:{width:string, height:string}) => {
      // console.log('change', size);
      Chart.resize(); //这个Chart是echart初始化后的对象实例，由于图标的宽度设置了100%，直接用它的resize方法就可以，也可以拿到参数中的size去设置图表元素的宽高
    };