可交互图表配置组件需串联数据流、事件链和dom生命周期；echarts.init()须等dom就绪，容器需显式宽高，setoption必须传新对象，事件监听须在setoption前注册，resize需手动绑定并处理竞态。
直接上结论：可交互的图表配置组件不是“配完就能用”，而是必须把数据流、事件链和 DOM 生命周期串起来——漏掉任一环，配置面板改了，图表就卡住不动。
echarts.init() 报 Cannot read property 'getBoundingClientRect' of null
这是最常踩的第一坑：DOM 元素还没挂上，echarts.init() 就冲进去了。
- 确保
<div id="chart"></div>在<script></script>执行前已存在于 HTML 中（别放里） -
<script></script>标签必须放在前，或显式监听DOMContentLoaded，别等window.onload - 容器必须有明确宽高：CSS 中设
width: 600px; height: 400px;，仅靠内容撑开无效
配置面板改了，图表不更新？检查 setOption 的对象引用
ECharts 的 diff 机制只认“新对象”，原地修改 option 再传进去，等于没动。
- 每次调用
setOption()都要传全新对象：比如chart.setOption({ ...oldOption, series: [{ ...oldOption.series[0], data: newData }] }) - 如果只更新 series 数据，用
setOption(newOption, { replaceMerge: ['series'] })，避免动画抖动 - 绝对不要在定时轮询中对原始
data数组做push()后复用，得用[...oldData, newItem]或slice()创建新引用
myChart.on('click') 不触发？顺序和绑定对象错了
事件监听不是挂在 DOM 上，也不是随便什么时候注册都行。
- 必须先
myChart.on('click', handler)，再setOption()；反过来，首次渲染的点击就收不到 -
params字段取决于配置：要有params.name，就得在xAxis.data或数据项里定义name字段；params.value是数值，params.dataIndex是索引，别默认它总有 - 想程序触发点击（比如点第 2 个柱子），用
myChart.dispatchAction({ type: 'click', seriesIndex: 0, dataIndex: 1 })，不是调 DOM 的.click()
resize 后图表挤压变形，不是响应式没开，是没手动监听
ECharts 默认不响应窗口变化，resize 是纯手动活。
- 必须写
window.addEventListener('resize', () => myChart.resize())，jQuery 的$(window).resize()不可靠 - 如果容器用了
flex或grid，resize 后可能还要检查容器尺寸是否真正生效，必要时加个setTimeout(() => myChart.resize(), 10)防竞态 - 移动端横竖屏切换也属于 resize，别只测 PC 端
真正难的不是写配置项，而是让“用户改配置”这件事本身变成一个受控的数据流：输入框变更 → 触发校验 → 生成新 option 对象 → 调用 setOption → 同步更新图表状态 → 反向同步回配置面板。中间任何一环没对齐引用或时机，整个交互就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
