Vue 3 集成 ECharts 推荐按需引入+组合式 API 封装：安装 echarts 及类型定义，仅注册所需图表/组件，封装 BaseChart.vue 实现自动初始化、响应式重绘与销毁。
Vue 3 项目初始化后集成 ECharts，核心是“装得轻、引得准、用得稳”。不需要全局挂载，也不必全量打包，按需引入 + 组合式 API 封装是最推荐的方式。
安装与版本确认
确保使用 Vue 3.2+ 和 ECharts 5.4+（当前稳定版），避免兼容问题：
- 运行 npm install echarts --save 安装主库
- TypeScript 项目建议加 npm install @types/echarts --save-dev
- 不推荐用
vue add echarts等非标准命令，Vite 或 Vue CLI 创建的项目均直接支持上述安装
按需引入（减小包体积）
全量引入会增加约 600KB，实际项目中只用到柱状图+折线图+提示框？那就只注册这些模块：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在组件或封装文件中导入核心及所需模块：
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]); - 地图类图表需额外注册 GeoJSON 数据（如中国地图），通过
echarts.registerMap('china', geoJson)手动加载
封装基础图表组件
新建 BaseChart.vue，用 ref 获取容器、onMounted 初始化、watch 响应配置变更：
- 模板中设置
<div ref="chartRef" :style="{ width, height }"></div>，宽高支持传入 props - 用
ResizeObserver监听容器尺寸变化并调用chartInstance.resize()，比监听 window resize 更精准 - 组件卸载时必须调用
chartInstance.dispose()，防止内存泄漏 - 对
props.options使用watch(..., { deep: true })，确保数据嵌套更新也能触发重绘
首次使用示例（HomeView.vue）
在页面中直接使用封装好的组件，传入配置即可渲染：
- const chartOptions = { title: { text: '月度销量' }, xAxis: { type: 'category', data: ['1月','2月','3月'] }, yAxis: {}, series: [{ type: 'bar', data: [120, 180, 150] }] };
- 无需手动 init 或 setOption，所有逻辑已在 BaseChart 内部处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
