HTML仪表盘多图表联动核心是通信机制：用全局事件或共享状态驱动重绘。Chart.js需自定义事件+深拷贝数据；ECharts推荐dispatchAction统一管理；框架项目应结合响应式状态与生命周期正确销毁实例。
HTML仪表盘里嵌入多图表联动面板，核心不是“怎么放进去”，而是“怎么让它们真正通信”——用全局事件或共享数据状态驱动重绘，否则只是静态堆叠。
用 Chart.js + customEvent 实现跨图表点击联动
Chart.js 本身不内置联动机制，但支持 onClick 回调和 chart.update()，配合自定义事件可低成本实现筛选联动。关键在于所有图表监听同一类事件，且事件 payload 携带统一语义（如 { type: 'filter', dimension: 'region', value: 'East' }）。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 初始化每个图表时，统一绑定
window.addEventListener('chart-filter', handler)，handler 内部调用chart.data.datasets.forEach(...)过滤数据再chart.update('active') - 触发方（比如地图点击或柱图高亮）用
window.dispatchEvent(new CustomEvent('chart-filter', { detail: {...} }))，避免依赖 DOM 层级或引用传递 - 注意：
chart.update()的第二个参数传'active'可跳过动画，提升响应速度；若需平滑过渡，改用'none'并手动控制动画配置 - 常见错误：多个图表共用同一份原始数据数组却未深拷贝，导致一个图表 filter 后影响其他图表渲染 —— 应在每个图表的
data构建阶段做JSON.parse(JSON.stringify(rawData))或用结构化克隆
用 ECharts 的 dispatchAction 统一管理联动逻辑
ECharts 原生支持 dispatchAction 和 on('click')，是更稳妥的联动方案，尤其适合复杂维度下钻（如省→市→区）。它把交互动作抽象为标准指令，图表实例自动响应。
实操建议：
- 所有图表实例保存到全局对象（如
window.charts = { sales: chart1, traffic: chart2 }），便于批量 dispatch - 点击某折线图 series 后，执行
charts.traffic.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 5 })，同时charts.sales.dispatchAction({ type: 'downplay', ... })实现反向弱化 - 注意兼容性：ECharts 5+ 的
dispatchAction支持restore类型，但老版本需手动维护 highlight 状态；若项目用的是 CDN 引入，确认 URL 中含v5路径 - 性能提示：高频联动（如鼠标 hover 联动）建议加
throttle，否则dispatchAction可能堆积导致卡顿 —— 推荐用 Lodash 的throttle(() => ..., 100)
Vue/React 项目中避免直接操作 DOM 图表实例
在组件框架里硬绑 new Chart() 或 echarts.init() 到 ref，容易造成生命周期错位、重复初始化、内存泄漏。联动失效往往源于图表实例丢失或未及时销毁。
实操建议：
- Vue 用
onMounted初始化图表，onBeforeUnmount显式调用chart.dispose()；React 用useEffect返回清理函数，且依赖数组必须包含所有影响图表配置的 props - 联动数据源应来自响应式状态（如 Vue 的
ref或 React 的useState），图表更新走watch或useEffect，而非监听自定义事件 —— 避免事件流与响应式流混杂 - 常见坑：父组件传入的
data是响应式对象，但 Chart.js 的data.labels是普通数组，修改它不会触发重绘 —— 必须整体替换chart.data并调用update()
联动真正的难点不在“怎么画”，而在“谁该响应、何时响应、响应到什么粒度”。比如点击一个饼图扇区，是否要同步过滤表格、更新 KPI 卡片、重载 API？这些业务逻辑边界必须提前约定清楚，否则图表间会变成互相猜意图的黑盒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
