让 ECharts 图表跟随容器大小变化

要让 ECharts 图表跟随容器大小变化，你需要做以下几件事：

1. 基本实现方法

初始化时设置

const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);

// 初始设置
myChart.setOption({
  // 你的图表配置
});

响应式调整

// 监听窗口大小变化
window.addEventListener('resize', function() {
  myChart.resize();
});

2. 处理更复杂的场景（如可伸缩侧边栏）

使用 ResizeObserver（推荐）

// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 当容器大小变化时重新调整图表大小
    myChart.resize();
  }
});

// 开始观察图表容器
resizeObserver.observe(document.getElementById('chart-container'));

兼容性处理

// 检查是否支持 ResizeObserver
if ('ResizeObserver' in window) {
  const resizeObserver = new ResizeObserver(() => myChart.resize());
  resizeObserver.observe(document.getElementById('chart-container'));
} else {
  // 回退到窗口 resize 事件
  window.addEventListener('resize', () => myChart.resize());
}

3. 完整示例

// 初始化图表
function initChart() {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);

  myChart.setOption({
    title: {
      text: '响应式图表'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });

  // 响应式处理
  function handleResize() {
    myChart.resize();
  }

  // 使用 ResizeObserver（如果可用）
  if ('ResizeObserver' in window) {
    const resizeObserver = new ResizeObserver(handleResize);
    resizeObserver.observe(chartDom);
  } else {
    // 回退方案
    window.addEventListener('resize', handleResize);
  }

  // 返回图表实例以便后续操作
  return myChart;
}

// 初始化
const chart = initChart();

4. 注意事项

1. 性能考虑：频繁的 resize 操作可能会影响性能，可以添加防抖（debounce）处理：

   const debouncedResize = debounce(() => myChart.resize(), 200);
   window.addEventListener('resize', debouncedResize);
   

2. 销毁时清理：在组件销毁时，记得移除监听器和观察者：

   if (resizeObserver) {
     resizeObserver.disconnect();
   }
   

3. SSR/SSG 场景：在服务端渲染或静态生成的应用中，确保只在客户端执行 ECharts 相关代码。

4. 容器隐藏问题：如果容器初始时是隐藏的（如折叠面板），需要在显示后调用 resize() 方法。

通过以上方法，你的 ECharts 图表将能够智能地响应各种容器大小变化，包括窗口大小变化、侧边栏伸缩或其他布局调整。