放入flex容器后ECharts饼图消失，原因何在？

核心原因 #

1. Flex子项的宽度收缩特性：flex容器内的子元素默认启用flex-shrink: 1，且未显式设置宽度时，子项会根据内容自动收缩。ECharts容器本身无初始内容，在flex布局下会被压缩至宽度为0；而在普通文档流中，块级元素默认width: auto，会占满父容器可用宽度，因此能正常渲染。
2. autoResize=false的限制：你关闭了ECharts的自动尺寸监听，容器初始化时宽度为0的状态无法被修正。ECharts仅在初始化阶段读取容器尺寸，后续不会主动检测容器尺寸变化，导致图表始终保持0宽度。

解决办法 #

• 给ECharts容器设置明确宽度：直接指定宽度值或占比，示例：

  <div style="height: 200px; width: 100%;" echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>
  

• 开启自动尺寸调整：将[autoResize]设为true，让ECharts监听容器尺寸变化，在flex布局完成后自动适配宽度，示例：

  <div style="height: 200px;" echarts (chartInit)="onChartInit($event)" [autoResize]="true" [options]="options"></div>
  

• 利用flex属性占满空间：给ECharts容器添加flex: 1，让它占据flex容器的可用空间，示例：

  <div style="display:flex;">
    <div style="height: 200px; flex: 1;" echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>
  </div>
  

内容的提问来源于stack exchange，提问作者Ole