vue3中怎么实现饼图

在 Vue3 中，你可以使用一些图表库来创建饼图，比如 `vue-chartjs`、`vue-apexcharts` 或者更流行的 `echarts-for-vue`。这里我会以 `vue-chartjs` 为例简单讲解如何实现：

首先，你需要安装必要的依赖项：

npm install vue-chartjs chart.js --save

然后，在组件中导入并配置饼图插件：

import { Pie } from 'vue-chartjs';

export default {
  extends: Vue.component,
  components: {
    PieChart: {
      extends: Pie,
      props: ['data', 'options'], // 数据和配置选项
      mounted() {
        this.renderPie();
      },
      methods: {
        renderPie() {
          this.renderChart(this.data, this.options);
        }
      }
    }
  }
}

接着，你可以像下面这样使用这个饼图组件，并传递数据和配置：

<template>
  <div>
    <PieChart :data="pieData" :options="chartOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pieData: {
        labels: ['Label 1', 'Label 2', 'Label 3'],
        datasets: [
          {
            data: [30, 50, 20], // 饼片的数据值
            backgroundColor: ['#f87979', '#7c4d9a', '#26a69a'], // 颜色设置
            hoverBackgroundColor: ['#ff6384', '#b377ca', '#1abc9c'], // 鼠标悬停颜色
          }
        ]
      },
      chartOptions: {
        responsive: true, // 自适应屏幕大小
        maintainAspectRatio: false, // 不保持固定宽高比
        tooltips: {
          enabled: true
        }
      }
    };
  }
};
</script>