RingChart 环形图

RingChart 环形图 的基础用法、公开 API 与示例。

基础示例

展示占比类数据。

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

<script setup lang="ts">
import { ref, } from "vue";
import { RingChart } from "@/components/chart/ring-chart";

const demoProps = { height: "260px", data: [{ name: "完成", value: 76 }, { name: "未完成", value: 24 }] };
</script>

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

隐藏源代码

图例与自定义颜色

通过图例和颜色区分不同状态。

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

<script setup lang="ts">
import { RingChart } from "@/components/chart/ring-chart";

const demoProps = {
  height: "280px",
  centerText: "项目状态",
  data: [
    { name: "进行中", value: 48 },
    { name: "已完成", value: 32 },
    { name: "待处理", value: 20 },
  ],
  colors: ["#2f6bff", "#12b76a", "#f79009"],
  showLegend: true,
  showLabel: true,
};
</script>

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

隐藏源代码

引入方式

import { RingChart } from "@/components/chart/ring-chart";

Props

参数	说明	类型	默认值	必填
height	图表高度	string	DEFAULT_CHART_HEIGHT	否
loading	是否加载中	boolean	false	否
isEmpty	是否为空数据	boolean	false	否
colors	颜色配置	string[]	-	否
showTooltip	是否显示提示框	boolean	true	否
showLegend	是否显示图例	boolean	false	否
legendPosition	图例位置	LegendPosition	"right"	否
legendOptions	自定义图例配置，会与默认配置合并	ChartCustomOptions	-	否
data	图表数据	PieDataItem[]	[]	否
radius	内外半径	string[]	["50%", "80%"]	否
borderRadius	边框圆角	number	10	否
centerText	中心文本	string	""	否
showLabel	是否显示标签	boolean	false	否

Events

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

Slots

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

Expose

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

Module API

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

Types

RingChartProps

环形图 Props

字段	说明	类型	默认值	必填
height	图表高度	string	-	否
loading	是否加载中	boolean	-	否
isEmpty	是否为空数据	boolean	-	否
colors	颜色配置	string[]	-	否
showTooltip	是否显示提示框	boolean	-	否
showLegend	是否显示图例	boolean	-	否
legendPosition	图例位置	LegendPosition	-	否
legendOptions	自定义图例配置，会与默认配置合并	ChartCustomOptions	-	否
data	图表数据	PieDataItem[]	-	是
radius	内外半径	string[]	-	否
borderRadius	边框圆角	number	-	否
centerText	中心文本	string	-	否
showLabel	是否显示标签	boolean	-	否

PieDataItem

饼图或环形图数据项

字段	说明	类型	默认值	必填
value	数据值	number	-	是
name	数据名称	string	-	是

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