【echarts】指令监听响应式尺寸变化 resize()

摘要：监听图表盒子的尺寸变化。

1、定义指令

  directives: {resize: {inserted(el, binding) {const resizeObserver = new ResizeObserver((entries) => {// 当DOM元素的宽高发生变化时执行回调函数binding.value(entries[0].contentRect);});resizeObserver.observe(el);// 组件销毁时停止观察el._resizeObserver_ = resizeObserver;},unbind(el) {if (el._resizeObserver_) {el._resizeObserver_.disconnect();delete el._resizeObserver_;}},}},

2、指令应用

2.1视图部分

<div class="echartbox" ref="echartRef"  v-resize="handleResize"></div>

2.2 methods部分

 handleResize() {myChart && myChart.resize()}