如何让ECharts实例根据其父元素宽高的变化而动态resize？

背景

需要让图表根据父元素的宽高进行自适应，并且宽高能够成比例的进行设置;通常我们都是使用window.resize方法，当窗口进行变化时候，进行执行echartsInstance.resize达到自适应效果。但显然不能满足这个需求，这时引入主角ResizeObserver

示例地址❤️❤️

效果

为了避免浪费时间，还是先上效果: 案例用container元素模拟作为echarts渲染DOM的父元素，设置了resize:both 控制container的可调整大小性

  <div class="container">
    <div id="myChart"></div>
  </div>

 .container {
     border: 1px solid;
     padding: 10px 40px;
     width: 600px;
     resize: both;
     margin: 0 auto;
     overflow: auto;
  }
  
 #myChart {
     width: 100%;
     aspect-ratio: 2 / 1;
     margin: 0 auto;
}

ResizeObserver

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。如果觉得这个触发比较频繁的话，可以使用防抖，让其在规定时间内触发

用法

    // 创建并返回一个ResizeObserver对象。并且把echartsInstance.resize作为监听后回调函数传入
    const observer = new ResizeObserver(myChart.resize)
    // 对div#myChart进行今天（这里继承body）
    const observeRectChange = () => {
      observer.observe(document.querySelector('#myChart'))
    }
    // 取消和结束目标对象上所有对div#myChart观察。
    const disconnectRectChange = () => {
      observer.disconnect()
    }

aspect-ratio 成比例

使用了aspect-ratio让元素宽高成比例

兼容性

如果对兼容性有要求，使用resize-observer-polyfill

圆满完成！！