用vue3实现饼图aip数据调用，请举例

在 Vue 3 中，可以使用第三方库如 ECharts 或者 Chart.js 来创建饼图，同时结合 Axios 发送 API 调用获取数据。以下是使用 ECharts 实现的一个简单示例，假设我们已经安装了 ECharts 和 Axios：

首先，安装依赖：

npm install echarts axios

然后，在项目中创建一个组件 `PieChart.vue`:

<template>
  <div id="pie-chart-container">
    <div v-show="loading">{{ loadingText }}</div>
    <div v-if="chartReady">
      <svg height="400" width="600"></svg> <!-- 使用ECharts渲染图表 -->
      <pie-chart-data :data="pieChartData" />
    </div>
  </div>
</template>

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

export default {
  props: {
    apiEndpoint: String, // 你的 API 接口地址
  },
  data() {
    return {
      pieChartData: [],
      loading: true,
      loadingText: '加载中...',
      chartReady: false,
    };
  },
  async mounted() {
    try {
      const response = await axios.get(this.apiEndpoint); // 发送 GET 请求
      if (response.data) {
        this.pieChartData = response.data; // 假设数据结构适配 ECharts 的需要
        this.renderChart();
      } else {
        console.error('Failed to fetch data from the API');
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
  methods: {
    renderChart() {
      this.loading = false;
      this.chartReady = true;

      const myChart = echarts.init(document.getElementById('pie-chart-container')); // 初始化图表
      const option = {
        ...this.$props.option, // 如果有默认配置项，请合并
        series: [
          {
            type: 'pie',
            data: this.pieChartData.map(item => ({ value: item.value, name: item.name })),
          },
        ],
      };

      myChart.setOption(option); // 绘制饼图
    },
  },
};
</script>

在上述代码中，我们在 `mounted` 生命周期钩子里发起 API 调用，获取到数据后设置 `pieChartData` 并调用 `renderChart` 方法绘制饼图。注意，你需要提供一个合适的 `option` 对象来初始化 ECharts，它应该包括系列类型、数据等。