安装指南

仅适用于 Vue >3.3 版本

执行以下命令

pnpm dlx shadcn-vue@latest add chart-area

配置说明

参照指南完成配置。

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.

curveType

CurveType

Type of curve

showGradient

boolean

Controls the visibility of gradient.

Emit

legendItemClick

[d: BulletLegendItemInterface, i: number]

示例

迷你趋势图

通过隐藏坐标轴、网格线和图例，可将图表转换为迷你趋势图。

自定义提示框

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