vue3使用echarts饼图

要在Vue3中使用echarts饼图，首先需要安装echarts插件。可以使用npm或yarn安装echarts：

npm install echarts --save

或者

yarn add echarts

安装完成后，在Vue组件中引入echarts，并使用vue3的生命周期函数mounted来初始化echarts实例，然后将数据传递给echarts实例进行渲染。下面是一个简单的vue3组件代码示例：

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

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

export default {
  name: 'PieChart',
  data() {
    return {
      chartData: [
        { name: 'A', value: 20 },
        { name: 'B', value: 30 },
        { name: 'C', value: 50 }
      ]
    }
  },
  mounted() {
    const chart = echarts.init(document.getElementById('pieChart'));
    chart.setOption({
      title: {
        text: '饼图示例',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: this.chartData.map(item => item.name)
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: this.chartData
        }
      ]
    });
  }
}
</script>

在这个示例中，我们引入了echarts，并在mounted生命周期函数中初始化echarts实例并设置饼图的数据和配置。最后将echarts实例渲染到页面上。注意，这里的数据需要在组件的data属性中定义。

这个示例只是一个简单的饼图，你可以根据自己的需求修改数据和配置来绘制更加复杂的图表。