<think>
我们正在讨论在
Vue 3中
使用ECharts的案例。根据提供的引用，我们可以总结出几种常见的方法。
引用[1]展示了如何在根组件（App
.vue）中通过`provide`提供
echarts实例，这样子组件就可以通过`inject`来获取
echarts实例，避免重复引入。
引用[2]和[3]展示了在组件内
使用ECharts的具体示例，包括
使用`ref`绑定DOM元素，然后在生命周期钩子中初始化图表。
引用[4]则详细说明了在组件脚本部分如何引入
ECharts，创建引用，初始化图表，并在组件卸载时销毁实例。
下面我将结合这些引用，给出一个在
Vue 3中
使用ECharts的完整案例，包括两种常见方式：
1
. 全局提供
echarts实例（通过provide/inject）
2
. 组件内直接
使用
同时，我们会注意在组件卸载时销毁实例以避免内存泄漏。
我们将按照以下步骤：
第一步：安装
ECharts
第二步：全局提供
echarts实例（可选）
第三步：在具体组件中初始化图表
第四步：销毁图表实例
下面是一个详细的示例：
</think>
###
Vue 3中
使用ECharts的完整实现案例
根据提供的引用实现方式，以下是两种在
Vue 3中
使用ECharts的推荐方案：
---
#### 方案一：全局Provide/Inject模式（推荐）
**原理**：在根组件全局提供
ECharts实例，子组件通过`inject`获取
**实现步骤**：
1
. **安装依赖**
```bash
npm install
echarts
vue@next
```
2
. **根组件(App
.vue) - 全局提供实例**
```
vue
<script setup>
import { provide } from '
vue'
import * as
echarts from '
echarts'
// 全局提供
echarts实例
provide('
echarts',
echarts)
</script>
<template>
<router-view />
</template>
```
3
. **子组件(ChartComponent
.vue) -
使用图表**
```
vue
<template>
<div ref="chartDom" class="w-full h-400px"></div>
</template>
<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from '
vue'
// 获取全局
echarts实例
const
echarts = inject('
echarts')
const chartDom = ref(null)
let chartInstance = null
// 初始化图表
const initChart = () => {
chartInstance =
echarts
.init(chartDom
.value)
chartInstance
.setOption({
tooltip: {},
xAxis: { data: ['A','B','C'] },
yAxis: {},
series: [{
type: 'bar',
data: [10, 22, 28]
}]
})
}
// 响应式重置大小
const handleResize = () => chartInstance?
.resize()
onMounted(() => {
initChart()
window
.addEventListener('resize', handleResize)
})
// 销毁实例避免内存泄漏
onBeforeUnmount(() => {
chartInstance?
.dispose()
window
.removeEventListener('resize', handleResize)
})
</script>
```
---
#### 方案二：组件内局部引用模式
**适用场景**：独立组件或简单
项目
**实现示例**：
```
vue
<template>
<div ref="chartContainer" class="chart-container"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from '
vue'
import * as
echarts from '
echarts'
const chartContainer = ref(null)
let myChart = null
onMounted(() => {
// 初始化图表
myChart =
echarts
.init(chartContainer
.value)
// 配置图表选项
const option = {
title: { text: '销售趋势图' },
tooltip: { trigger: 'axis' },
xAxis: { data: ['1月','2月','3月'] },
yAxis: {},
series: [{
name: '销售额',
type: 'line',
data: [150, 230, 184]
}]
}
myChart
.setOption(option)
})
// 组件卸载时销毁实例
onBeforeUnmount(() => {
myChart?
.dispose()
})
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px;
}
</style>
```
---
### 关键实践要点
1
. **内存管理**
必须
使用`onBeforeUnmount`销毁实例，避免内存泄漏
```javascript
myChart
.dispose() // 销毁实例[^4]
```
2
. **响应式处理**
监听窗口变化自动调整图表尺寸：
```javascript
window
.addEventListener('resize', () => myChart?
.resize())
```
3
. **TypeScript支持**
使用类型声明增强代码健壮性：
```typescript
const chartDom = ref<HTMLDivElement | null>(null)[^2]
```
4
. **多图表管理**
当组件包含多个图表时，
使用动态引用：
```
vue
<div v-for="(item,index) in charts" :key="index">
<div :ref="el => chartRefs[index] = el"></div>
</div>
```
---
### 完整
项目结构建议
```
src/
├── App
.vue # 提供全局
echarts实例
├── main
.ts
└── components/
├── BarChart
.vue # 柱状图组件
├── Lin
eChart.vue # 折线图组件
└── Pi
eChart.vue # 饼图组件
```
> 提示：对于复杂图表
项目，推荐采用方案一的provide/inject模式，可实现：
> 1
. 单例模式减少包体积
> 2
. 统一版本管理
> 3
. 全局主题配置共享[^1][^3]
本文详细介绍如何使用ECharts创建动态图表，包括安装、基本配置及数据实时更新等实用技巧，适合初学者快速上手。
扫一扫
2074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
