如何让 echart 的内容跟随容器大小而变化？

在使用 ECharts 时，确保图表内容能够跟随容器大小变化是非常重要的，尤其是当容器大小由于侧边栏伸缩或其他原因发生变化时。以下是一些方法来实现 ECharts 图表的自适应：

1. 监听窗口大小变化： 通过监听 window 对象的 resize 事件，可以在浏览器窗口大小变化时调整 ECharts 图表的大小。这适用于大多数情况，尤其是当容器大小的变化是由浏览器窗口大小变化引起的。

   window.addEventListener('resize', function() {
       if (echartsInstance) {
           echartsInstance.resize();
       }
   });
   

   这种方法简单且易于实现，但可能不足以应对容器大小变化不是由窗口大小变化引起的情况。

2. 监听容器大小变化： 如果容器大小的变化不是由窗口大小变化引起的（例如，侧边栏伸缩），则需要监听容器本身的变化。可以使用 ResizeObserver API 来监听容器大小的变化。

   const resizeObserver = new ResizeObserver(entries => {
       for (let entry of entries) {
           const {width, height} = entry.contentRect;
           echartsInstance.resize({width, height});
       }
   });
   resizeObserver.observe(containerElement);
   

   ResizeObserver 提供了一种更细粒度的监听方式，可以监听到容器大小的精确变化，而不仅仅是窗口大小的变化 。

3. 监听侧边栏状态变化： 如果侧边栏的伸缩导致容器大小变化，可以通过监听侧边栏的状态变化来触发图表的重绘。这通常涉及到在侧边栏伸缩动画完成后，调用 ECharts 的 resize 方法。

   watch: {
       'sidebar.opened'(newVal) {
           setTimeout(() => {
               echartsInstance.resize();
           }, 300); // 300ms 是侧边栏动画的持续时间
       }
   }
   

   这种方法需要你能够访问到侧边栏状态的变化，可能需要根据你的具体框架或库进行调整 。

4. 使用防抖技术： 由于频繁地调用 resize 方法可能会影响性能，尤其是在容器大小快速变化时（例如，快速拖动侧边栏），可以使用防抖技术来减少 resize 方法的调用频率。

   function debounce(func, wait) {
       let timeout;
       return function() {
           clearTimeout(timeout);
           timeout = setTimeout(() => {
               func.apply(this, arguments);
           }, wait);
       };
   }
   const debouncedResize = debounce(() => {
       echartsInstance.resize();
   }, 200);
   window.addEventListener('resize', debouncedResize);
   

   防抖技术可以确保 resize 方法不会因为频繁的事件触发而被过度调用，从而提高性能 。

通过上述方法，你可以确保 ECharts 图表能够适应容器大小的变化，无论是由于窗口大小变化还是其他因素引起的。根据你的具体需求和应用场景，选择最合适的方法来实现图表的自适应。