柱状图

介绍

柱状图是一种常见的数据可视化图表，主要用于展示不同类别之间的数量或比例关系。通过对比柱子的高度，可以直观地看出各类别之间的差异。柱状图适用于对比多个类别的数据，例如销售额、人口数量等。

API

Props

参数名	描述	类型	默认值
status	默认状态，支持变量绑定	'default' | 'hide'	'default'
showBarStack	数据堆叠，柱状图是否开启堆积	Boolean	false
data	数据源，支持变量绑定	Array<Record<string, any>>	-
xAxisField	x 轴（类目），类目的数据字段编码	string	'year'
yAxisField	y 轴（数值），数值系列的数据字段编码	Array	[{name:sale1},{name:sale2}]
width	宽，图表画布宽度	string	'500px'
height	高，图表画布高度	string	'300px'
gridTop	上边距，绘图区域距离画布上边距	string	'60px'
gridBottom	下边距，绘图区域距离画布下边距	string	'60px'
gridLeft	左边距，绘图区域距离画布左边距	string	'10%'
gridRight	右边距，绘图区域距离画布右边距	string	'10%'
series	数值系列，图表数值系列配置	数值系列	-
yAxis	Y 轴配置，图表 y 轴配置	Y 轴配置	-
标题	标题，图表标题配置	标题	-
X 轴	X 轴，图表 X 轴配置	X 轴	-
柱条样式	柱条样式，柱状图柱条样式配置	柱条样式	-
图例	图例，图表图例配置	图例	-
提示框	提示框，图表提示框配置	提示框	-
key	唯一标识，组件唯一标识	string	组件 key 值

Props 数值系列

参数名	描述	类型	默认值
name	字段编码，数据字段编码	string	'value'
title	系列名，系列名称	string	'数值'
yAxisIndex	Y 轴索引，系列 Y 轴索引	string	-
barColor	柱条颜色，系列颜色，对填充、边框、标记等生效	string	-
showLabel	显示标签，系列是否显示标签	boolean	false
labelFontSize	字号，标签字号	string	12
labelColor	颜色，标签颜色	string	'#FFF'
customSeriesBar	自定义参数（series-bar），	code

Props Y 轴配置

参数名	描述	类型	默认值
showYAxis	显示 Y 轴，图表 Y 轴是否显示	boolean	true
yAxisPosition	位置，Y 轴位置	'left' | 'right'	'left'
showYAxisLine	显示轴线，图表轴线是否显示	boolean	true
yAxisLineWidth	线宽，轴线线宽	string	1
yAxisLineColor	轴线颜色，轴线颜色	string	'#333333'
showYAxisLabel	显示刻度标签，图表是否显示刻度标签	boolean	true
yAxisScaleNumber	刻度数量，刻度标签数量，参考值	number	5
yAxisLabelFontSize	字号，刻度标签字号	number	12
yAxisLabelFontWeight	字体粗细，刻度标签字体粗细	'normal' | 'bold' | 'bolder' | 'lighter'	'normal'
yAxisLabelColor	文字颜色，刻度标签文字颜色	string	-
showYAxisSplitLine	分隔线，是否显示 X 轴分隔线	boolean	true
yAxisSplitLineColor	分隔线颜色，分隔线颜色	string	'#CCCCCC'
customYAxis	自定义参数（yAxis），	code

Props 标题

参数名	描述	类型	默认值
showTitle	显示标题，图表标题是否显示	boolean	false
title	主标题，图表主标题	string	'主标题'
subTitle	副标题，图表副标题	string	'副标题'
customTtile	自定义参数（title），	code

Props X 轴

参数名	描述	类型	默认值
showXAxis	显示 X 轴，图表 X 轴是否显示	boolean	true
showXAxisLine	显示轴线，图表轴线是否显示	boolean	true
xAxisLineWidth	线宽，轴线线宽	string	1
xAxisLineColor	轴线颜色，轴线颜色	string	#333333
showXAxisLabel	显示刻度标签，图表是否显示刻度标签	boolean	true
xAxisLabelFontSize	字号，刻度标签字号	string	12
xAxisLabelFontWeight	字体粗细，刻度标签字体粗细	'normal' | 'bold' | 'bolder' | 'lighter'	'normal'
xAxisLabelColor	文字颜色，刻度标签文字颜色	string	-
xAxisLabelRotate	角度，刻度标签倾斜角度	string	-
showXAxisSplitLine	分隔线，是否显示 X 轴分隔线	boolean	true
xAxisSplitLineColor	分隔线颜色，分隔线颜色	string	#CCCCCC
showXAxisPointer	显示指示器，是否显示 X 轴指示器	boolean	true
xAxisPointerType	指示器类型，指示器类型	'shadow' | 'line'	'shadow'
customXAxis	自定义参数（xAxis），	code

Props 柱条样式

参数名	描述	类型	默认值
barWidth	柱条宽度，柱条宽度	string	'auto'
barCategoryGap	不同系列柱间距，不同系列柱间距	string	'20%'
barGap	同系列柱间距，同系列柱间距	string	'30%'
barBackgroundColor	柱条背景，柱条背景	string	-

Props 图例

参数名	描述	类型	默认值
showLegend	显示图例，图表图例是否显示	boolean	true
legendPosition	图例位置，图例显示位置	'auto' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	'auto'
legendOrient	布局方向，图例排列方向	'horizontal' | 'vertical'	'horizontal'
legendWidth	宽，图例区域宽度	string	'auto'
legendHeight	高，图例区域高度	string	'auto'
legendScroll	支持滚动，图例超出宽高后是否支持滚动	boolean	false
customLegend	自定义参数（legend），	code

Props 提示框

参数名	描述	类型	默认值
showTooltip	显示提示框，图表提示框是否显示	boolean	true
tooltipTrigger	触发类型，提示框触发类型	'item' | 'axis'	'item'
tooltipBackgroundColor	背景颜色，提示框背景颜色	string	'rgba(50,50,50,0.7)'
tooltipBorderColor	边框颜色，提示框边框颜色	string	'#333333'
tooltipColor	文字颜色，提示框文字颜色	string	'#FFFFFF'
tooltipFontSize	字号，提示框文字字号	string	14
customTooltip	自定义参数（tooltip），	code