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 自动销毁
• 必须设置宽高：容器元素（如
  ）的 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 可只注册用到的控制器和元素

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！