vue3+echarts实现饼图

以下是使用 Vue3 和 Echarts 实现饼图的示例代码：

1. 安装 Echarts：`npm install echarts`

2. 引入 Echarts：

import echarts from "echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";

3. 在 Vue3 组件中使用 Echarts：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.chart);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "饼图示例",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>

在上面的示例代码中，我们在 `mounted` 钩子函数中初始化了一个 Echarts 实例，并使用 `setOption` 方法将图表的配置项和数据传递给 Echarts 实例，从而显示出饼图。

其中，`ref` 属性指定了图表所在的 DOM 元素，`title` 属性设置了图表标题，`legend` 属性设置了图例，`series` 属性设置了饼图的数据和样式。

如果需要修改饼图的样式或数据，只需要更改 `option` 对象的属性即可。