父容器 display: none 时子元素图表宽度为 0，因图表初始化依赖 clientwidth/offsetwidth，而该状态下值恒为 0，导致渲染空白；须确保父容器“真可见”（offsetparent !== null）后再初始化，或改用 visibility: hidden 配合布局控制。
父容器 display: none 时子元素图表宽度为 0，不是图表库问题
图表（如 Chart.js、ECharts）初始化时会读取父容器的 clientWidth 和 offsetWidth。若父容器是 display: none，这些值恒为 0，图表就画在 0×0 区域里——后续即使显示出来，也不自动重绘。
常见错误现象：canvas 元素存在但空白、svg 图表无内容、控制台没报错但图表不渲染；检查 DevTools 的 Elements 面板，能看到 canvas 宽高确实是 0。
- 别在
display: none状态下调用chart.render()或new Chart() - 避免用
visibility: hidden+opacity: 0模拟隐藏——它们不触发重排，图表仍读不到尺寸 - 如果用 JS 切换显隐，必须确保图表初始化发生在父容器已渲染且尺寸可读之后
图表初始化时机必须等父容器“真可见”
不能靠 DOM 加载完成就初始化图表，得等父容器脱离 display: none 并完成首次 layout。
- 监听父容器的
offsetParent变化：当el.offsetParent !== null时再初始化 - 对动态显示的 tab 或 modal，用
setTimeout(() => { initChart() }, 0)不够可靠，推荐用requestAnimationFrame或ResizeObserver - Chart.js 用户注意：
responsive: true默认依赖父容器尺寸，若初始化时不可见，需手动调用chart.resize() - ECharts 用户注意：
chart.setOption()后必须紧跟chart.resize()，尤其在容器从隐藏切为显示后
用 visibility: hidden 替代 display: none 可避免尺寸丢失
visibility: hidden 保留盒模型占位，父容器尺寸始终可读，图表能正常获取宽高——只是内容不可见。
- 把 CSS 中的
display: none改成visibility: hidden; height: 0; overflow: hidden;（可选，防止内容溢出干扰布局） - 显示时改回
visibility: visible; height: auto;，无需额外 resize - 这个方案对 tab 切换、折叠面板等场景最稳妥，比反复调用
resize()更轻量 - 注意：如果父容器本身高度由内容撑开，
visibility: hidden仍会保留空白区域，需配合height: 0控制
现代布局中更推荐用 flex/grid + visibility 控制显隐
浮动或绝对定位导致的塌陷问题已基本淘汰，但 display: none 对图表的破坏依然高频——根源不在图表库，而在 CSS 渲染时机。
- 避免把图表直接塞进
display: none的div，改用visibility+ 布局上下文（如display: flex容器） - 如果必须用
display: none（比如 SEO 或服务端渲染兼容），初始化前先临时设为visibility: hidden，init 完再切回display: none - 复杂嵌套（如 modal 内多个图表）建议统一用
ResizeObserver监听容器尺寸变化，而不是靠事件或定时器
真正麻烦的是那些“看起来没动，其实父容器被 JS 动态切换了 display”的场景——这时候光看 HTML 源码发现不了问题，得盯着 Elements 面板里实时的 computed style 和 offsetWidth 才能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
