安装

仅适用于 Vue >3.3

运行以下命令

npx shadcn-vue@latest add chart-line

设置

按照指南完成设置。

API

属性

数据

Record<string, any>[]必需*

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

类别

string[]必需*

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

索引

string必需*

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

颜色

string[]

更改默认颜色。

边距

间距

每个容器的边距

过滤器不透明度

number

更改未选字段的不透明度

xFormatter

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

格式化 X 轴标签的函数

yFormatter

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

格式化 Y 轴标签的函数

showXAxis

boolean

控制 X 轴的可见性。

showYAxis

boolean

控制 Y 轴的可见性。

showTooltip

boolean

控制工具提示的可见性。

showLegend

boolean

控制图例的可见性。

showGridLine

boolean

控制网格线的可见性。

customTooltip

Component

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

curveType

CurveType

曲线类型

事件

legendItemClick

[d: BulletLegendItemInterface, i: number]

示例

迷你图

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

自定义工具提示

如果你想渲染自定义工具提示，你可以轻松地传入一个自定义组件。请参考属性定义这里。