用Vue3 实现饼状图

要使用Vue3实现饼状图，可以使用第三方库如ECharts或Chart.js。这里以ECharts为例进行说明。

首先，需要安装ECharts的依赖包：

npm install echarts --save

然后，在Vue组件中引入ECharts：

import echarts from 'echarts'

接着，创建一个div元素用于显示饼状图，并在组件的mounted钩子函数中初始化ECharts并绘制饼状图：

export default {
  mounted() {
    const chartDom = document.getElementById('chart')
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        text: '饼状图示例'
      },
      tooltip: {},
      legend: {
        data: ['数据1', '数据2', '数据3']
      },
      series: [
        {
          name: '数据',
          type: 'pie',
          radius: '50%',
          data: [
            {value: 335, name: '数据1'},
            {value: 310, name: '数据2'},
            {value: 234, name: '数据3'}
          ]
        }
      ]
    }
    myChart.setOption(option)
  },
  // ...
}

最后，在组件的template中添加用于显示饼状图的div元素：

<template>
  <div id="chart" style="width: 100%; height: 400px;"></div>
</template>

这样就完成了使用Vue3实现饼状图的过程。