uniapp 圆形图

uniApp 提供了一套丰富的图表组件库，其中包括圆形图（Circle Chart）这一类别。圆形图，也称为环状图或百分比图，常用于展示数据之间的比较关系，它将整体作为一个圆，然后分割成多个区域，每个区域代表不同的数据值，通过颜色渐变清晰地显示占比情况。

在uniApp中，你可以使用`uni-charts`组件库中的`circle`组件来创建圆形图。例如，设置数据系列、标签、颜色等属性，可以轻松配置出动态的圆形图。以下是基本的使用步骤：

1. 引入依赖：在项目中安装并引入uni-charts相关的插件。
2. 创建实例：在需要展示图表的地方，创建一个新的`circle`组件实例。
3. 数据配置：提供一个包含各个数据项及其对应的百分比的数据数组。
4. 配置选项：设置图表的标题、动画效果、交互模式等。

下面是一个简单的示例代码片段：

<template>
  <view>
    <uni-charts :chart-type="type" :data="data" :options="options"></uni-charts>
  </view>
</template>

<script>
import { uniCharts } from '@vant/wechat-charts';

export default {
  components: {
    uniCharts,
  },
  data() {
    return {
      type: 'circle', // 图表类型
      data: [
        { name: '数据A', value: 30 },
        { name: '数据B', value: 50 },
        { name: '数据C', value: 70 },
      ],
      options: {
        title: {
          text: '圆形图示例',
        },
        series: [{ data: this.data }],
      },
    };
  },
};
</script>