--- theme: channing-cyan --- # 概述 **技术栈**：Vue3 + Ts + Vite + Echarts **简介**：图文详解，教你如何在**Vue3**项目中**引入Echarts**，**封装Echarts组件**，并实现常用Echarts图例 *** # 一、先看效果 ### 1.1 静态效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78d585c2bbfd4bbbb78df7da486812aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2551\&h=1252\&s=333222\&e=png\&b=ffffff) ### 1.2 动态效果 ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae6561e03d1c400c96386f07e949f004~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2541\&h=1226\&s=3407064\&e=gif\&f=71\&b=fdfdfd) *** # 二、话不多数，引入 Echarts ### 2.1 安装 Echarts npm: ```bash npm i echarts --save ``` pnpm: ```bash pnpm i echarts --save ``` ### 2.2 main.ts 中引入 ```bash //引入echarts import * as echarts from 'echarts'; app.config.globalProperties.$echarts = echarts; ``` ### 2.3 Echarts 组件封装 **`/src/components/ReEcharts/index.vue` 文件中写入如下代码** ```typescript ``` *** # 三、使用 ### 3.1 柱状图实现效果： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b17764579fbe4feebee1d73099d529e3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1507\&h=563\&s=71577\&e=png\&b=ffffff) 全量代码： ```typescript ``` *** ### 3.2 圆环图实现效果： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39cd6ad3f6f5476293241e7b08ff2eb1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=752\&h=571\&s=29944\&e=png\&b=ffffff) 全量代码： ```typescript ``` *** ### 3.3 词云图实现效果： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e978510696094748acca6c5271553dea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=745\&h=560\&s=101443\&e=png\&b=ffffff) 全量代码： ```typescript ``` *** ### 3.4 雷达图实现效果： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e94c48025edf46199a52c6f1d440b819~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=750\&h=558\&s=59836\&e=png\&b=ffffff) 全量代码： ```typescript ``` # 四、创作不易，点赞收藏不迷路！！！