vue3使用echarts饼状图请求接口获取数据

你可以使用 Vue3 和 ECharts 来请求接口并获取数据，然后将数据渲染到饼状图中。下面是一个简单的示例：

首先，确保你已经安装了 Vue3 和 ECharts：

npm install vue@next
npm install echarts

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

import * as echarts from 'echarts';

接下来，在你的组件中创建一个方法来请求接口并获取数据：

methods: {
  fetchData() {
    // 这里可以使用 axios 或者其他库来发送请求
    axios.get('/api/data')
      .then(response => {
        const data = response.data;
        this.renderChart(data); // 调用渲染图表的方法
      })
      .catch(error => {
        console.error(error);
      });
  },
  renderChart(data) {
    // 使用 ECharts 渲染饼状图
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);
    const option = {
      // 饼状图的配置项和数据
      series: [{
        type: 'pie',
        data: data,
      }],
    };
    myChart.setOption(option);
  },
},

在上面的代码中，`fetchData` 方法发送请求并获取数据，然后调用 `renderChart` 方法来渲染饼状图。注意要根据你的实际情况修改请求的 URL 和数据处理逻辑。

最后，在模板中使用一个容器来展示饼状图：

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

这样，当组件加载时，调用 `fetchData` 方法即可请求接口并渲染饼状图。

希望这个示例能帮助到你！