ECharts初始化需确保DOM就绪，用DOMContentLoaded或script置于/body前；setOption须传新对象而非修改原option；交互须用myChart.on()或dispatchAction；窗口缩放后须手动调用resize()。
初始化 echarts 实例前必须确保 DOM 已就绪
常见错误是直接在 <script> 标签里调用 echarts.init()，但此时 document.getElementById('main') 返回 null，控制台报错 Cannot read property 'getBoundingClientRect' of null。
解决方式不是靠延时或轮询，而是把初始化逻辑放在 DOM 加载完成之后：
- 使用
DOMContentLoaded事件（推荐） - 将
<script>放在</body>前（简单有效） - 避免在
<head>中执行初始化代码
示例中若容器是 <div id="main"></div>，则必须确认该元素在执行 echarts.init() 时已存在于文档流中。
setOption 是更新图表的唯一安全方式，别直接改 option 对象
很多人误以为修改原始 option 对象再调用 myChart.setOption(option) 就能刷新，结果发现图表没反应或交互失效。这是因为 ECharts 内部对 option 做了深度监听和缓存，直接改引用会导致 diff 失效。
立即学习“前端免费学习笔记（深入）”；
正确做法是每次更新都传入一个**新构造的对象**，或显式启用合并模式：
- 全量更新：直接传新
option，ECharts 自动 diff - 增量更新：用
myChart.setOption(newOption, { notMerge: false })，默认就是false - 禁用动画更新：加
replaceMerge: ['series']可精准替换某部分，避免过渡抖动
尤其在定时轮询更新数据时，务必每次生成新数组，比如 data: [...newData]，而不是 data.push(...) 后复用原对象。
点击、高亮等交互依赖 dispatchAction，不是靠监听 DOM 事件
想实现“点击柱子跳转页面”或“鼠标悬停显示自定义提示”，不能只绑 click 到容器 DOM 上——那拿到的是像素坐标，不是语义化数据点。ECharts 的交互体系是基于数据项的，必须用 dispatchAction 或注册事件监听器。
例如绑定点击事件：
- 先调用
myChart.on('click', (params) => { console.log(params.name, params.value) }) -
params包含seriesName、name（X 轴值）、value、dataIndex等真实业务字段 - 若需程序触发（如模拟用户点击第 2 个柱子），用
myChart.dispatchAction({ type: 'click', seriesIndex: 0, dataIndex: 1 })
漏掉 myChart.on() 注册这步，后续所有交互逻辑都会静默失败。
resize 必须手动调用，否则窗口缩放后图表变形
这是最常被忽略的细节：ECharts 不会自动监听 window.resize。当浏览器窗口大小变化，或者父容器（比如 flex 布局里的 div）尺寸动态调整时，图表会挤压、留白、文字错位，但控制台无任何报错。
修复只需两行：
- 在初始化后立即绑定：
window.addEventListener('resize', () => myChart.resize()) - 如果容器是通过 JS 动态显示/隐藏（如 el-tabs 切换），切换后也得手动调用
myChart.resize()
注意不要重复绑定，否则 resize 会触发多次；也不要用 setTimeout 延迟 resize——它解决不了布局重排时机问题。
