VUE3 ECharts5 快速上手（附详细步骤）

最新推荐文章于 2025-03-14 08:30:00 发布

_xiyang

最新推荐文章于 2025-03-14 08:30:00 发布

阅读量974

点赞数 28

分类专栏： ECharts 文章标签：前端 echarts vue3

本文链接：https://blog.youkuaiyun.com/g841805/article/details/136879583

版权

本文介绍了如何在Vue应用中安装并引入ECharts库，使用Vue的生命周期钩子`mounted`确保在DOM加载完成后初始化图表，以及如何设置响应式选项来动态更新图表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装
```
pnpm install echarts
```
引入 ECharts
```
import * as echarts from 'echarts';
```

设置容器

注意：虽然echarts可以在配置时设置宽高，但还是推荐在配置前直接为容器设置宽高

<template>
  <div id="main" class="echart-style">
  </div>
</template>
<style scoped>
.echart-style {
  width: 1000px;
  height: 900px;
  background: skyblue;
}
</style>

使用
1. 引入vue需要的方法
```
import { onMounted, ref } from 'vue';
```
2. 声明响应式变量
```
let myChart = ref()
let option = ref({})
```
3. 等待组件加载完成后再初始化echarts组件（这里将初始操作封装再init方法中），防止echar