uni-app做个饼状图

UniApp 是一个基于 Vue.js 的跨平台框架，它可以让你使用一套代码同时构建 Web、iOS、Android 和 H5 应用。关于在 UniApp 中制作饼状图，你可以使用其提供的可视化组件库，例如 Element Plus 或者 vant-weapp，它们都提供了丰富的图表组件。

以 Element Plus 为例，你可以按照以下步骤创建一个饼状图：

1. 引入依赖：

<template>
  <view>
    <el-chart :chart-data="chartData" type="pie" :options="chartOptions"></el-chart>
  </view>
</template>

<script>
import { ElChart } from '@element-plus/charts';
import 'element-plus-charts/dist/element-plus-charts.min.css';

export default {
  components: {
    ElChart,
  },
  data() {
    return {
      chartData: [
        { name: '部分一', value: 33 },
        { name: '部分二', value: 30 },
        { name: '部分三', value: 20 },
        { name: '部分四', value: 17 },
      ],
      // 饼图配置选项
      chartOptions: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          data: ['部分一', '部分二', '部分三', '部分四'],
        },
        series: [
          {
            name: '各部分占比',
            type: 'pie',
            radius: '55%', // 控制饼图大小
            data,
            label: {
              normal: {
                formatter: '{value} %', // 显示百分比
              },
            },
          },
        ],
      },
    };
  },
};
</script>

在这个例子中，`chartData` 是饼状图的数据，包含名称和值，`chartOptions` 是配置选项，包括标题、标签、提示等。