这问题我之前也踩过好几次坑，核心原因就是标签页隐藏时，浏览器会暂停该标签的重排重绘，导致ECharts初始化时没法正确获取容器的实际宽度，只能拿到浏览器对隐藏元素默认的100px宽。光靠window.onresize = myChart.resize肯定不够，因为这个事件只有浏览器窗口大小改变时才会触发，标签切换根本不会触发它。给你几个亲测有效的解决办法：

方案一：监听标签页显示/切换事件，手动触发resize #

原生标签页切换监听（visibilitychange） #

如果是浏览器自带的标签页切换，可以监听页面的visibilitychange事件，当页面从隐藏变为显示时，手动调用图表的resize方法：

document.addEventListener('visibilitychange', function() {
  // 当页面变为可见状态时
  if (!document.hidden) {
    // 加个100ms的延迟，确保容器已经完成显示和宽高计算
    setTimeout(() => {
      myChart.resize();
    }, 100);
  }
});

UI框架标签页切换事件（比如Element Tabs） #

如果你用的是前端UI框架的标签组件（比如Element的el-tabs），直接监听组件的切换事件更精准：

// 假设你的el-tabs绑定了@tab-change="handleTabSwitch"
function handleTabSwitch() {
  setTimeout(() => {
    myChart.resize();
  }, 100);
}

方案二：延迟初始化图表，直到容器可见 #

如果你的图表是在页面加载时就初始化，但此时容器还处于隐藏状态（比如在未激活的标签页里），可以改成等容器显示后再初始化图表：

// 比如在标签切换到对应面板时执行这个函数
function initOrResizeChart() {
  const container = document.getElementById("main");
  const isVisible = getComputedStyle(container).display !== 'none';
  
  if (isVisible) {
    if (!myChart) {
      // 第一次初始化图表
      myChart = echarts.init(container);
      myChart.setOption(statistics);
      window.onresize = myChart.resize;
    } else {
      // 已经初始化过，直接resize
      myChart.resize();
    }
  }
}

方案三：备选——给容器设置明确的宽高（布局允许的话） #

如果你的布局场景允许，可以给ECharts容器设置固定宽高或者用calc()计算的宽高，比如：

#main {
  width: calc(100% - 20px);
  height: 400px;
}

不过这个方案适配性不如前两个，适合布局固定的场景。

补充说明 #

为什么要加setTimeout？因为标签切换后，浏览器需要一小段时间来完成容器的显示和宽高计算，立即调用resize可能还是会拿到旧的宽高值，100ms的延迟基本能覆盖这个过程。

内容的提问来源于stack exchange，提问作者Mr.lu