Vue 3 集成 ECharts 或 Chart.js 的核心是“安装 + 初始化 + 封装”，需封装为响应式、可复用组件并妥善管理生命周期；ECharts 推荐用 ref + onMounted + watch + ResizeObserver，Chart.js 优先选用 vue-chartjs v4+；二者均须确保 DOM 已挂载、实例手动销毁、SSR 环境判断。
Vue 3 项目初始化时集成 ECharts 或 Chart.js，核心在于“安装 + 初始化 + 封装”，不是装完就能用，关键在组件级的可复用封装和生命周期管理。下面分两部分说明，都以最常用、最稳妥的方式展开。
ECharts 集成：推荐封装为响应式图表组件
这是目前 Vue 3 生态中最主流、文档最全、兼容性最好的方案，适合大屏、后台、数据看板等场景。
-
安装依赖：运行
npm install echarts --save；TypeScript 项目建议加npm install @types/echarts --save-dev -
创建基础图表组件（如
BaseChart.vue），用ref拿 DOM 容器，onMounted初始化实例，watch监听配置变更，onBeforeUnmount自动销毁 -
必须设置宽高：容器元素（如
<div ref="chartRef"></div>）的 CSS 中需明确声明width和height，否则图表不渲染 -
响应式适配建议：用
ResizeObserver监听容器尺寸变化并调用chartInstance.resize()，比监听 window resize 更精准、无抖动
Chart.js 集成：优先使用官方 Vue 封装库
Chart.js 本身不直接支持 Vue 3 的 Composition API，但社区有成熟维护的 vue-chartjs（v4+ 支持 Vue 3），更适合轻量图表或快速原型。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
安装组合包：执行
npm install chart.js vue-chartjs --save，注意确认vue-chartjs版本 ≥ 4.0.0 -
封装为组合式组件：导入
defineChart工具函数，基于Chart.js类型定义图表类型（如Bar、Line），再通过useChart管理数据与配置 -
避免全局挂载：不推荐在
main.ts中用app.config.globalProperties挂载 Chart.js，容易引发 SSR 不兼容或类型丢失问题 -
数据更新更简单：Chart.js 默认支持 reactive 数据驱动，修改
props.data或computed返回的新数据，图表会自动重绘
统一注意事项
无论选哪个库，初始化阶段都要避开这几个典型坑：
立即学习“前端免费学习笔记（深入）”；
-
DOM 必须已挂载：图表初始化必须在
onMounted或nextTick后执行，不能在setup同步调用init -
实例需手动销毁：组件卸载前务必调用
dispose()（ECharts）或destroy()（Chart.js），否则内存泄漏、重复渲染 -
SSR 场景要判断环境：若项目支持服务端渲染，需用
if (typeof window !== 'undefined')包裹初始化逻辑，防止 Node 环境报错 -
主题与按需引入可后期优化：初期用完整版即可；后续如需减小体积，ECharts 可改用
echarts/core+ 单独引入组件，Chart.js 可只注册用到的控制器和元素
