echarts.init()白屏或报错主因是引入顺序错误、容器无宽高、DOM未就绪；需确保CDN脚本在初始化代码前加载，容器设明确width/height，用DOMContentLoaded监听确保DOM就绪，并手动监听resize调用myChart.resize()。
直接用 echarts.init() 初始化 DOM 容器就能跑起来，但卡在白屏、报错 Cannot read property 'init' of undefined 或图表不显示，八成是引入顺序、容器尺寸或 DOM 就绪时机出了问题。
CDN 引入必须放在 <script> 使用前
很多人把 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> 放在 </body> 底部，但初始化代码写在了 <head> 里——结果 echarts 还没加载完，echarts.init() 就执行了，浏览器自然报 undefined。
-
<script>初始化代码必须放在 CDN<script>标签之后（同个<body>内推荐紧贴其后） - 如果用
defer，CDN 标签可以放<head>，但初始化脚本也得加defer，且保证顺序 - 别信“放哪儿都行”，实测 Chrome/Firefox 对 script 执行顺序很严格
echarts.init() 的 DOM 元素必须有宽高
常见错误：只写了 <div id="chart"></div>，没设 style="width: 600px; height: 400px;"，或者用 % 却父容器没高——echarts 渲染时读到 offsetWidth = 0，直接静默失败，控制台也不报错。
- 容器必须有明确的
width和height（CSS px/em/rem 都行，%要确保祖先链有高度） - 避免用
min-height或flex自适应但没给基准值，echarts 不会等 flex 布局完成再测量 - 调试时临时加
border: 1px solid red看容器是否真渲染出来了
DOM 就绪后再调用 echarts.init()
脚本放在 <body> 底部看似安全，但如果页面有异步加载、动态插入内容，或者用了 Web Components，document.getElementById('chart') 仍可能返回 null。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥是包一层
DOMContentLoaded：document.addEventListener('DOMContentLoaded', () => { const chartDom = document.getElementById('chart'); if (!chartDom) return; const myChart = echarts.init(chartDom); myChart.setOption(option); }); - 不用 jQuery，也别依赖
window.onload（它等所有资源，太慢） - 如果容器是 JS 动态创建的，确保
echarts.init()在 appendChild 之后执行
真正容易被忽略的是 resize 响应——图表初始化后窗口缩放，柱状图会挤压变形，必须手动监听并调用 myChart.resize()；还有主题切换、数据异步加载后的 setOption 调用时机，这些不是“能跑就行”的环节，而是上线后用户第一眼就注意到的问题。
