echarts交互核心是数据驱动：通过on()监听事件获取参数，再用setoption或dispatchaction动态更新视图。初始化需固定容器尺寸并启用tooltip、legend等组件，联动与性能优化依赖差量更新和合理事件选择。
用 ECharts 做交互图表，核心不是写一堆配置，而是理解“数据驱动交互”的逻辑：图表自动响应用户操作（如点击、悬停、缩放），再通过事件回调更新视图或联动其他组件。只要掌握事件绑定 + 动态更新两个关键点，入门并不难。
一、初始化图表并启用基础交互
ECharts 默认已开启多数交互（如 tooltip 悬停提示、legend 图例开关、dataZoom 缩放）。只需在初始化时传入容器和基础配置：
- 确保 DOM 容器有固定宽高（如
style="width: 600px; height: 400px;"） - 调用
echarts.init(dom)获取实例，再用setOption()渲染图表 - tooltip、legend、dataZoom 等组件在 option 中设为
show: true即可生效（默认通常已开启）
二、监听用户交互事件
ECharts 提供统一的 on() 方法绑定事件，常见事件包括：click、mouseover、legendselectchanged、datarangeselected 等。
- 例如监听柱状图点击：
myChart.on('click', function(params) { console.log(params.name, params.value); }) -
params包含触发元素的系列名（seriesName）、数据名（name）、值（value）、索引（dataIndex）等关键信息 - 图例切换事件（
legendselectchanged）适合做多图表联动控制
三、动态更新图表内容
交互后常需刷新数据或样式，避免重新 init，直接调用 setOption() 并传入差量配置（支持合并更新）：
- 更新数据：修改
series[0].data后再次setOption({ series: [...] }) - 高亮某项：用
dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 2 }) - 重置高亮：用
dispatchAction({ type: 'downplay' }) - 注意：setOption 默认不合并，如需保留 legend 选中状态，加第二个参数
true（即setOption(option, true)）
四、实战小技巧：让交互更自然
真正好用的交互不是堆功能，而是贴合用户预期：
- 点击图例项时，用
legendselectchanged配合setOption控制对应 series 的show属性 - 时间轴图表配合
dataZoom和brush实现区域筛选，再用getDataRange获取当前缩放范围 - 移动端注意开启
roam: true（适用于地图/散点图）并设置silent: false确保手势响应 - 避免频繁 setOption：大数据量更新时，先用
appendData或replaceMerge提升性能
不需要写复杂插件或重写渲染器，ECharts 的交互能力已在配置层和 API 层充分暴露。从监听一个 click 开始，连上数据、更新视图、再加一点动效反馈，交互感就立住了。
