Echarts图响应容器大小的变化

监听图表容器的大小并改变图表大小

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

注意：

有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此 resize 事件将不会被触发。如果有需要覆盖这种情况，可以借助浏览器的 ResizeObserver API 来实现更细粒度的监听。  

以下是在 vue3 中使用 ResizeObserver 来实现图表大小随容器大小改变而改变：

nextTick(() => {
  const maine = document.getElementById("maine"); // 获取dom元素
  const objResizeObserver = new ResizeObserver(function (entries) {
        console.log("观察者函数被执行");
        myChart.value.resize();
    });
    objResizeObserver.observe(maine);
})

使用 nextTick 确保在 DOM 更新后执行操作。 创建了一个 ResizeObserver 对象，在被观察的元素大小变化时执行指定的回调函数。在回调函数中，通过 myChart.value.resize() 来重新调整图表的大小。将 ResizeObserver 对象绑定到 maine 元素上，以便观察其大小变化。