vue3中echarts环形统计图代码

以下是一个简单的 vue3 中 echarts 环形统计图代码示例：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PieChart",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: this.data.map((item) => item.name),
        },
        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: this.data,
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => chart.resize());
    },
  },
};
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

在 `props` 中传入一个数组类型的数据，数组包含每个环形的名称和值：

[
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 },
  { name: "D", value: 40 },
]

在 `mounted` 钩子函数中初始化 echarts 图表，设置一些基本的配置项，例如：

- `tooltip`：鼠标悬停在环形上时显示的提示框；
- `legend`：环形图例；
- `series`：环形的数据和配置项。

最后，通过 `chart.setOption(option)` 设置 echarts 图表的配置项，并添加一个窗口大小改变的监听事件，使图表自适应大小。