安装

仅适用于 Vue >3.3

运行以下命令

npx shadcn-vue@latest add chart-area

设置

遵循 指南 完成设置。

API

属性

数据

Record<string, any>[]必需*

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

类别

string[]必需*

从您的数据中选择类别。 用于填充图例和工具提示。

索引

string必需*

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

颜色

string[]

更改默认颜色。

边距

间距

每个容器的边距

过滤不透明度

数字

更改未选中字段的不透明度

x 格式化程序

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

格式化 X 标签的函数

y 格式化程序

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

格式化 Y 标签的函数

显示 X 轴

布尔值

控制 X 轴的可见性。

显示 Y 轴

布尔值

控制 Y 轴的可见性。

显示工具提示

布尔值

控制工具提示的可见性。

显示图例

布尔值

控制图例的可见性。

显示网格线

布尔值

控制网格线的可见性。

自定义工具提示

组件

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

曲线类型

CurveType

曲线类型

显示渐变

布尔值

控制渐变的可见性。

发射

图例项点击

[d: BulletLegendItemInterface, i: number]

示例

迷你图

我们可以通过隐藏轴、网格线和图例将图表转换为迷你图。

自定义工具提示

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