安装

仅适用于 Vue >3.3

运行以下命令

npx shadcn-vue@latest add chart-donut

设置

请按照 指南 完成设置。

API

属性

颜色

string[]

更改默认颜色。

索引

string必填*

设置用于将数据映射到轴的键。

数据

Record<string, any>[]必填*

源数据，其中每个条目都是一个字典。

边距

间距

每个容器的边距。

筛选器不透明度

number

更改未选定字段的不透明度。

显示工具提示

boolean

控制工具提示的可见性。

显示图例

boolean

控制图例的可见性。

类别

string必填*

设置包含定量图表值的键的名称。

类型

'donut' | 'pie'

更改图表类型。

排序函数

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

用于对段进行排序的函数。

值格式化程序

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

控制标签的格式。

自定义工具提示

组件

渲染自定义工具提示组件。

示例

饼图

如果您想渲染饼图，请将 type 传递为 pie。

颜色

我们会根据主色和辅助色自动生成颜色，并相应地分配它们。 您可以随意传递自己的颜色数组。

自定义工具提示

如果您想渲染自定义工具提示，您可以轻松地传递一个自定义组件。 请参考属性定义 此处。