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

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

上一篇文章中我们将完成左下部分的升序降序的表格完成了，接下来我们将使用echarts图表来完成我们的折线图以及饼状图。

1. 首先，介绍一下echarts，他是一个基于 JavaScript 的开源可视化图表库，官网链接如：echarts.apache.org/zh/index.ht… ，我们可以通过快速上手来使用这个强大的组件库。
2. 第一步我们需要安装echarts,如下步骤所示：

3. 第二步我们需要在main.js文件里面引入这个组件，代码如下所示：

import * as echarts from 'echarts';

然后需要在app里面use一下就可以使用了。

4. 我们的折线图的数据如下代码所示：

 var myChart = echarts.init(document.getElementById("pic3"), "dark");
  myChart.setOption({
    title: {
      text: "每月送达快递类型",
      subtext: "",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "生活用品" },
          { value: 735, name: "零食饮料" },
          { value: 580, name: "鞋子衣物" },
          { value: 484, name: "书籍作品" },
          { value: 300, name: "数码产品" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

这些代码需要我们定义在onMounted生命周期函数里面，这样我们才可以刚进入页面就获取到图表数据并且完成图表的渲染展示，然后我们需要创建一个id为pic3的盒子，来存放这个折线图，并且这个盒子需要有宽度以及高度，定义完成之后我们的页面上就会出现这个折线图，如下图所示：

这个背景颜色我选择的dark，可以删除dark恢复为默认颜色，此外，这个饼状图也同理，这里就不做过多的赘述了。