环形图

Alpha

环形图以圆形方式直观展示数据，类似于饼图但中心留空，突出各类别间的比例关系。

Component Source

安装方式 ​

运行以下命令 ​

pnpm dlx shadcn-vue@latest add chart-donut

设置 ​

参照指南完成设置。

API ​

Prop

colors
string[]

Change the default colors.

index
stringRequired*

Sets the key to map the data to the axis.

data
Record<string, any>[]Required*

The source data, in which each entry is a dictionary.

margin
Spacing

Margin of each the container

filterOpacity
number

Change the opacity of the non-selected field

showTooltip
boolean

Controls the visibility of tooltip.

showLegend
boolean

Controls the visibility of legend.

category
stringRequired*

Sets the name of the key containing the quantitative chart values.

type
'donut' | 'pie'

Change the type of the chart

sortFunction
((a: any, b: any) => number)

Function to sort the segment

valueFormatter
((tick: number, i?: number, ticks?: number[]) => string)

Controls the formatting for the label.

customTooltip
Component

Render custom tooltip component.

示例 ​

饼图 ​

若需渲染饼图，可将 type 参数设为 pie。

颜色配置 ​

系统会根据主色调和辅助色自动生成颜色并进行分配。也可传入自定义颜色数组。

自定义提示框 ​

如需渲染自定义提示框，可轻松传入自定义组件。具体属性定义请参考文档。

Edit this page on GitHub