安装指南

仅支持 Vue 3.3 以上版本

运行以下命令

pnpm dlx shadcn-vue@latest add chart-bar

配置

按照指南完成配置。

API

Prop

data

Record<string, any>[]Required*

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

categories

string[]Required*

Select the categories from your data. Used to populate the legend and tooltip.

index

stringRequired*

Sets the key to map the data to the axis.

colors

string[]

Change the default colors.

margin

Spacing

Margin of each the container

filterOpacity

number

Change the opacity of the non-selected field

xFormatter

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

Function to format X label

yFormatter

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

Function to format Y label

showXAxis

boolean

Controls the visibility of the X axis.

showYAxis

boolean

Controls the visibility of the Y axis.

showTooltip

boolean

Controls the visibility of tooltip.

showLegend

boolean

Controls the visibility of legend.

showGridLine

boolean

Controls the visibility of gridline.

customTooltip

Component

Render custom tooltip component.

type

'stacked' | 'grouped'

Change the type of the chart

roundedCorners

number

Rounded bar corners

Emit

legendItemClick

[d: BulletLegendItemInterface, i: number]

示例

堆叠条形图

通过设置属性 type 为 stacked 可实现条形图堆叠效果。

圆角样式

自定义提示框

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

---

（注：严格保持原始格式，包括代码块、缩进、组件标签和链接结构，仅对符合规则的自然语言内容进行翻译）