条形图
Alpha折线图通过不同长度的矩形条形图直观地表示数据,以比较不同类别或组之间的数量。
安装
仅适用于 Vue >3.3
API
属性
数据
Record<string, any>[]
必填*源数据,其中每个条目都是一个字典。
类别
string[]
必填*从您的数据中选择类别。用于填充图例和工具提示。
索引
string
必填*设置用于将数据映射到轴的键。
颜色
string[]
更改默认颜色。
边距
间距
每个容器的边距
筛选器不透明度
number
更改未选中字段的不透明度
x 格式化程序
((tick: number | Date, i: number, ticks: number[] | Date[]) => string)
格式化 X 标签的函数
y 格式化程序
((tick: number | Date, i: number, ticks: number[] | Date[]) => string)
格式化 Y 标签的函数
显示 X 轴
boolean
控制 X 轴的可见性。
显示 Y 轴
boolean
控制 Y 轴的可见性。
显示工具提示
boolean
控制工具提示的可见性。
显示图例
boolean
控制图例的可见性。
显示网格线
boolean
控制网格线的可见性。
自定义工具提示
组件
渲染自定义工具提示组件。
类型
'stacked' | 'grouped'
更改图表类型
圆角
number
圆角条形图
发出
图例项点击
[d: BulletLegendItemInterface, i: number]
示例
堆叠
您可以通过将 prop type
设置为 stacked
来堆叠条形图。
圆角
自定义工具提示
如果您想渲染自定义工具提示,您可以轻松地传入一个自定义组件。请参考属性定义 此处。