vue3.0后台管理项目（day11）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

上一篇文章中我们引入了echarts并且使用它创建了一个折线图，接下来将介绍如何使用echarts创建饼状图或者柱状图，以及其他模块的开发。

1. 首先，我们进入到echarts的官网：echarts.apache.org/zh/index.ht… ，进入后找到示例，然后就可以看到echarts为我们提供了许多的图表模型，这里我们选择饼状图，随便点击一个进去就可以看到它的效果图以及源码了，当我们需要用到的时候只需要复制粘贴源码到我们的项目里面去就可以了，这里我先示范下这个饼状图的引入以及使用

• 第一步：在main.js文件中引入下echarts并且在app后面use使用一下。

import * as echarts from 'echarts';

• 第二步：在需要使用到echarts图表的页面文件里面创建onMounted生命周期函数，然后在函数里面定义myChart，后面的dark是配置图表的背景颜色的，目前echats官方只支持dark以及默认颜色，相应的配置代码如下所示：

var myChart = echarts.init(document.getElementById("pic3"), "dark");

• 第三步：我们需要创建一个id为pic3的盒子来存储我们的饼状图，这里的pic3是和上面getElementById括号里面的内容相互对应的，不一定要叫这个名字，然后要给这个盒子设置好宽度以及高度，接下来就是对应的数据了

• 第四步：配置数据，我们可以参照官网的示例来修改我们需要的数据，这里我配置的数据如下图所示，可以根据自己的需求来改数据。

这样我们的饼状图就配置完成了，就可以在页面上看到相应的效果图了。