ECharts交互失效、缩放变形、数据无响应，主因是初始化时机错误、setOption未用新对象引用、事件注册顺序不当及resize未手动监听。
echarts.init() 报 Cannot read property 'getBoundingClientRect' of null
这是 DOM 元素还没加载完就执行初始化导致的。document.getElementById('main') 返回 null，后续所有操作都会崩。
- 把
<script>标签移到</body>前（最简单可靠） - 或者显式监听
DOMContentLoaded，别用window.onload（它等资源，太晚） - 绝对不要在
<head>里直接调echarts.init()，哪怕加了defer也不保险 - 容器
<div id="main"></div>必须存在且有宽高（CSS 中设width/height，仅靠内容撑开不行）
setOption 更新数据后图表不动或交互失效
直接修改原始 option 对象再传给 setOption()，ECharts 内部 diff 会失效——它只认“新对象引用”。
- 每次更新必须构造新对象：
chart.setOption({ ...oldOption, series: [{ ...oldOption.series[0], data: newData }] }) - 定时轮询时，
data数组一定用新数组，别push()后复用原引用 - 需要局部替换（比如只换 series 数据），用
setOption(newOption, { replaceMerge: ['series'] })，避免动画抖动 -
notMerge: true是全量重绘，慎用；默认false就是增量合并，够用
myChart.on('click') 不触发或 params 字段缺失
没注册监听器，或者监听对象错了——ECharts 的事件必须挂到实例上，不是 DOM 容器。
- 必须先调
myChart.on('click', handler)，再调setOption()；顺序反了，首次渲染的点击就收不到 -
params里字段取决于配置：要有name得在xAxis.data或数据项里定义；value是数值，dataIndex是索引，别指望它总有category - 想程序触发交互（比如模拟点击第 2 个柱子），用
myChart.dispatchAction({ type: 'click', seriesIndex: 0, dataIndex: 1 })，不是.click()DOM 方法 - tooltip 显示逻辑别写在
on('mouseover')里动态改tooltip.formatter，应提前配好tooltip: { formatter: '{a} <br/>{b} : {c}' }
窗口 resize 后图表挤压变形
ECharts 不监听 window.resize，resize 是纯手动活，漏掉就永远失真。
立即学习“前端免费学习笔记（深入）”；
- 绑定
window.addEventListener('resize', () => myChart.resize())，别用 jQuery 的$(window).resize() - 如果容器是 flex 或 grid 动态尺寸，resize 后可能还要检查
myChart.getDom().offsetWidth是否为 0，为 0 说明父级还没渲染完，得加防抖或延迟 - SSR 或框架（如 Vue）中首次渲染后需主动调一次
resize()，否则初始尺寸常不准 - 移动端横竖屏切换也属于 resize，同样要覆盖
