ECharts 多图表联动需用 echarts.connect([chart1, chart2, ...]) 全局方法，确保实例已初始化且传入正确引用；动态增图须重连；自定义筛选需监听 legendselectchanged 并 dispatchAction；跨框架联动应改用 CustomEvent 事件总线。
用 ECharts 的 connect 方法实现多图表联动
多个 ECharts 实例之间要响应同一操作（比如鼠标悬停、点击图例），最直接的方式是调用 echarts.connect。它不是配置项，而是全局方法，需在所有图表实例初始化完成后调用。
常见错误是：在某个图表还没渲染完就执行 connect，结果联动失效；或者传入了非实例对象（比如 DOM 元素或 null）。
- 确保每个图表都已通过
echarts.init(dom)初始化，并保存好返回的实例引用 - 调用时传入数组，如
echarts.connect([chart1, chart2, chart3])，不能传字符串 ID 或选择器 - 如果后续动态添加图表，必须重新调用
connect并传入新旧全部实例，否则新图表不参与联动 - 联动默认开启图例、提示框、数据区域缩放三类事件，无需额外配置
tooltip或legend的selectedMode
手动同步筛选状态：监听 legendselectchanged 事件
当需要跨图表做自定义过滤（比如点击一个图表的图例，只让另一个图表隐藏对应系列，但保留其 tooltip 显示），就不能只依赖 connect，得自己监听和分发事件。
重点在于：ECharts 的 legendselectchanged 是“选择状态变化后”触发，比 legendscroll 或点击更稳定；但它的 event.selected 是全量布尔映射，不是增量变更。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听时用
chart.on('legendselectchanged', handler)，不要用click，后者无法区分图例点击和空白点击 - handler 中拿到
event.name和event.selected[name]，再调用目标图表的dispatchAction({ type: 'legendToggleSelect', name: xxx }) - 避免循环触发：在目标图表执行
dispatchAction前，先临时移除它的legendselectchanged监听器，执行完再加回 - 如果目标图表是异步加载数据的，确保
dispatchAction在setOption完成后调用，否则可能报Component not found
表格与图表联动：用统一数据源 + 状态驱动
仪表盘里常见「左侧表格、右侧趋势图」结构，用户点表格某行，图表聚焦该维度。这种联动不能靠 DOM 事件硬绑，而应抽离共享状态。
核心思路是：把选中项（如 selectedId）存在一个可观察对象里，表格和图表都订阅它；任一组件更新状态，另一方响应重绘。
- 不用
localStorage或URL 参数做中转——延迟高、序列化开销大、且无法响应实时取消操作 - 推荐用轻量级状态对象，例如
const state = { selectedId: null }，配合Object.defineProperty或Proxy实现 setter 拦截 - 表格行点击时设置
state.selectedId = row.id，图表的setOption中根据state.selectedId过滤 series.data - 注意防抖：如果表格支持搜索+高亮，避免每次输入都触发图表重绘，对
state.selectedId的 setter 加 100ms 节流
跨容器/跨框架图表联动的兼容性陷阱
当仪表盘混用 Vue 组件、React 子应用或纯 HTML 片段时，echarts.connect 会失效——因为不同框架管理的 ECharts 实例生命周期不一致，甚至 DOM 引用被框架代理过。
此时必须降级为基于事件总线的手动通信，且要处理好上下文丢失问题。
- 不要在 Vue 的
onMounted或 React 的useEffect里直接调用echarts.connect，它大概率找不到其他框架挂载的实例 - 改用
CustomEvent或BroadcastChannel（同源多标签页）广播筛选动作，例如new CustomEvent('chart-filter', { detail: { field: 'region', value: '华东' } }) - 每个图表监听该事件，在回调里调用自身
dispatchAction，并确保 action payload 格式统一（建议用对象而非字符串） - 最容易被忽略的是：Vue/React 组件卸载时，必须显式
removeEventListener，否则旧实例残留监听器会导致内存泄漏和重复触发
