ECharts适合开箱即用的业务图表，D3.js面向深度定制和复杂交互场景；ECharts推荐vue-echarts封装以支持响应式更新与自动销毁，D3.js需手动对齐Vue生命周期管理初始化、更新与销毁。
Vue 与图表库集成，核心在于理清“谁管状态、谁管渲染、谁负责清理”。ECharts 和 D3.js 路径不同：ECharts 更适合开箱即用的业务图表，D3.js 则面向深度定制和交互逻辑复杂的可视化场景。选对方式，能避免内存泄漏、响应失灵和维护困难。
ECharts：推荐用 vue-echarts 封装组件
直接调用原生 ECharts API 容易绕过 Vue 响应式系统，导致数据更新后图表不刷新。vue-echarts 提供了真正的 Vue 组件封装，天然支持 props 传参、v-model 绑定和生命周期联动。
- 安装时必须同时引入 echarts 和 vue-echarts，缺一不可
- 按需引入更轻量：从
echarts/core导入 CanvasRenderer、所需图表类型（如 BarChart）和组件（如 TooltipComponent），再通过use([...])注册 - 配置项建议抽离为 computed，便于复用和测试；动态更新只需修改 options 对象，组件会自动 diff 并重绘
- 务必在
beforeUnmount钩子中调用chart.dispose()（若手动管理实例）或依赖 vue-echarts 内置的销毁逻辑，防止内存残留
D3.js：必须手动对齐 Vue 生命周期
D3 是命令式操作 DOM 的库，它自己维护状态（比如 zoom 行为、transition 实例、brush selection）。Vue 不会自动感知这些内部状态，因此必须由开发者显式接管初始化、更新和销毁三个阶段。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
初始化 放在
mounted，用ref获取容器，再用d3.select(container.value)开始构建 -
更新 通过
watch监听数据变化，调用 D3 的 enter/update/exit 模式，避免全量重绘；注意不要在 update 中重复 append 容器级元素（如 svg） -
销毁 是关键：在
beforeUnmount中，先清除 D3 绑定的事件（.on('zoom', null)）、中断过渡（.interrupt()）、移除 zoom/brush 行为，最后清空容器 innerHTML 或逐个 remove 元素；顺序错误会导致报错 - 避免在
mounted中直接写container.value.innerHTML = ''，这会让正在运行的 transition 回调访问已销毁节点而崩溃
共性要点：DOM 引用与响应式边界
无论用哪个库，都依赖 ref 获取真实 DOM 容器。这个 ref 必须绑定在有明确宽高的元素上——没有 width/height 的 div 渲染出的图表常为空白或错位。
立即学习“前端免费学习笔记（深入）”；
- 图表容器建议用
<div ref="chartRef" style="width: 100%; height: 400px;"></div>，避免依赖父容器 flex 或 grid 的隐式尺寸 - 不要在
created阶段初始化图表，此时 DOM 还未挂载，$refs为 undefined - 若图表需随窗口缩放，监听
resize事件并手动调用 chart.resize()（ECharts）或重设比例尺+重绘（D3） - 复杂图表建议封装为独立子组件，props 接收数据和配置，内部管理自身状态，降低耦合度
