DonutChartCard 环图卡片

DonutChartCard 环图卡片 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DonutChartCard } from "@/components/card/donut-chart-card";

const demoProps: InstanceType<typeof DonutChartCard>["$props"] = {
  title: "完成率",
  value: 76,
  percentage: 8,
  currentValue: "本月",
  previousValue: "上月",
  data: [76, 24],
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DonutChartCard v-bind="demoProps"></DonutChartCard>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { DonutChartCard } from "@/components/card/donut-chart-card";

Props

参数	说明	类型	默认值	必填
value	数值	number	-	是
title	标题	string	-	是
percentage	百分比	number	-	是
percentageLabel	百分比标签	string	""	否
currentValue	当前年份	string	""	否
previousValue	去年年份	string	""	否
height	高度，默认 9	string | number	9	否
color	颜色	string	""	否
radius	半径，默认 ["70%", "90%"]	[string, string]	["70%", "90%"]	否
data	数据，默认 [0, 0]	[number, number]	[0, 0]	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
DonutChartCard	导出 DonutChartCard 供业务侧复用。	useInstall(index)

Types

DonutChartCardProps

环型图卡片属性。

字段	说明	类型	默认值	必填
value	数值	number	-	是
title	标题	string	-	是
percentage	百分比	number	-	是
percentageLabel	百分比标签	string	-	否
currentValue	当前年份	string	-	否
previousValue	去年年份	string	-	否
height	高度，默认 9	string | number	-	否
color	颜色	string	-	否
radius	半径，默认 ["70%", "90%"]	[string, string]	-	否
data	数据，默认 [0, 0]	[number, number]	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。