Bootstrap Tabs切换时Echarts图表不显示的解决方法

你是否也曾遇到过这样的困扰：在 Bootstrap 的选项卡（Tabs）中嵌入 ECharts 图表时，第一个标签页显示正常，一旦切换到第二个标签页，图表要么直接变成空白，要么缩成一团、完全变形？先别急着检查代码，这其实是一个经典的“时机错位”问题。

切换 Tab 后 ECharts 图表空白或变形的根本原因

这一问题的根源在于 ECharts 的初始化原理。执行 echarts.init() 时，图表库会立即读取容器元素的 offsetWidth 和 offsetHeight，以便确定绘图区域尺寸。然而，Bootstrap 为了提升标签页切换的流畅性，默认将非激活状态的 .tab-pane 设置为 display: none。对于浏览器而言，被隐藏的元素尺寸为 0。因此，如果图表初始化所在的标签页恰好处于隐藏状态，ECharts 读取到的宽高都是 0，自然无法正常渲染，或者画布尺寸出现异常。这并非代码逻辑错误，而是 DOM 的可见状态与图表生命周期的节奏不匹配。

监听 shown.bs.tab 并调用 resize()

解决思路的核心很简单：等待。必须等到标签页面板完全显示之后，再通知图表重新计算尺寸。Bootstrap 提供了 shown.bs.tab 事件，该事件在切换动画完成、面板完全可见时触发。需要注意，事件名称应与你的 HTML 结构匹配：

• 如果导航使用 data-toggle="tab"（通常配合 .nav-tabs 样式），则监听 shown.bs.tab。
• 如果使用 data-toggle="pill"（通常配合 .nav-pills 样式），则监听 shown.bs.pill。

以下是一个基础示例：

const myChart = echarts.init(document.getElementById('chart1'));
// 省略 setOption 配置

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 通过判断目标 href，确保只重绘当前激活 tab 下的图表，避免误操作其他图表
  if ($(e.target).attr('href') === '#tab-charts') {
    myChart.resize();
  }
});

多个图表共存时的统一管理方法

一个页面中往往包含多个图表，逐一手动维护变量并调用 resize() 不仅繁琐，还容易遗漏。更优雅的做法是集中注册、统一管理。

可以在全局作用域定义一个数组，例如 const charts = []。每次初始化一个图表后，将其推入数组：charts.push(myChart)。然后在事件回调中遍历数组执行重绘。但需要注意：不能盲目遍历，必须确保只对当前可见标签页内的图表进行重绘，否则可能因容器再次不可见而获取不到正确尺寸。

更稳妥的写法是增加可见性判断：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 获取当前被激活的面板
  const targetPane = $($(e.target).attr('href'));
  // 遍历所有图表实例
  charts.forEach(chart => {
    // 检查当前图表的 DOM 元素是否存在于这个激活的面板内
    if (targetPane.find(chart.getDom()).length) {
      chart.resize();
    }
  });
});

为什么不能在 show.bs.tab 或 click 中调用 resize

你可能会想：提前监听事件不行吗？答案是否定的。show.bs.tab 事件触发时，面板的 .active 类尚未添加，DOM 的重排（Reflow）也未完成，此时 offsetWidth 仍为 0。而普通的 click 事件触发得更早，面板甚至还没开始切换流程。因此，shown.bs.tab 是唯一能确保面板已渲染、尺寸可被准确读取的安全时机。

此外，还有一个常见延伸问题：即便在正确时机调用了 resize()，图表可能仍然不正常。这时需要检查 CSS。如果图表容器嵌套在使用了 flex 或 grid 布局的父元素中，且没有显式设置宽高，容器可能无法计算出有效尺寸。解决方法是为父容器设置明确的最小尺寸，例如 min-width: 300px; min-height: 200px;，为图表提供一个可靠的布局基准。