求助：Apache ECharts在Bootstrap折叠面板中无法显示的问题

API 探路者

2026-8-5

解决方案

问题根源：Bootstrap折叠面板默认处于隐藏状态，ECharts初始化时无法获取到容器的实际宽高（此时宽高为0），导致图表无法正常绘制。

解决方法：监听折叠面板的shown.bs.collapse事件，在面板完全展开后再初始化ECharts，或者对已创建的图表实例调用resize()方法重新渲染。

具体代码实现

// 获取折叠面板和图表容器元素
const targetCollapse = document.getElementById('collapseExample');
const chartContainer = document.getElementById('main');
let chartInstance;

// 监听折叠面板展开完成事件
targetCollapse.addEventListener('shown.bs.collapse', function () {
  if (!chartInstance) {
    // 初始化图表
    chartInstance = echarts.init(chartContainer);
    // 图表配置项（替换为你的实际配置）
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    chartInstance.setOption(option);
  } else {
    // 已初始化则触发resize重新渲染
    chartInstance.resize();
  }
});