折线柱状图

介绍

折线柱状图是一种用于展示多变量数据的图表类型，它结合了折线图和柱状图的特点，可以同时展示不同变量的趋势和数值大小。

API

Props

参数名	描述	类型	默认值
status	默认状态，支持变量绑定	'default' | 'hide'	'default'
data	数据源，支持变量绑定	Array<Record<string, any>>	-
xAxisField	x 轴（类目），x 轴的数据字段编码	string	'month'
yAxisField	y 轴（数值），y 轴的数据字段编码	Array	[{name:value1},{name:value2}]
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	'sale'
yAxisIndex	y 轴索引，系列所使用的 y 轴在 y 轴配置中的索引	string	0
type	图表类型，系列所使用的图表类型，包括折线图、柱状图	string	'柱'
title	系列名，系列名称	string	'销量'
showMark	显示标记，系列是否显示标记	boolean	false
markSize	标记大小，标记图形大小	string	8
markType	标记类型，标记图形类型	'circle' | 'emptyCircle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow'	'circle'
showLabel	显示标签，系列是否显示标签，前提需要显示标记	boolean	false
labelFontSize	字号，标签字号	string	12
labelColor	颜色，标签颜色	string	'#FFF'
barColor	柱条颜色，系列指定柱条颜色	string	-
lineStyle	线条样式，折线图线条样式	'solid'| 'dashed' | 'dotted'	'solid'
lineWidth	线宽，折线图线条线宽	string	2
lineColor	颜色，线条颜色	string	-
lineType	线条类型，折线图线条类型	'default' | 'smooth' | 'step'	'default'
areaStyle	面积填充，是否开启折线图面积填充	boolean	false

Props Y 轴配置

参数名	描述	类型	默认值
showYAxis	显示 Y 轴，图表 Y 轴是否显示	boolean	true
showYAxisLine	显示轴线，图表轴线是否显示	boolean	true
yAxisLineWidth	线宽，轴线线宽	string	1
yAxisLineColor	轴线颜色，轴线颜色	string	'#333333'
showYAxisLabel	显示刻度标签，图表是否显示刻度标签	boolean	true
yAxisLabelFontSize	字号，刻度标签字号	string	12
yAxisLabelFontWeight	字体粗细，刻度标签字体粗细	'normal' | 'bold' | 'bolder' | 'lighter'	'normal'
yAxisLabelColor	文字颜色，刻度标签文字颜色	string	-
showYAxisSplitLine	分隔线，是否显示 Y 轴分隔线	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