折线图

介绍

折线图是一种常用的数据可视化图表，主要用于展示数据随时间或顺序的变化趋势。通过连接各数据点形成的线条，可以清晰地看出数据的上升或下降趋势。折线图适用于展示连续的时间序列数据，例如股票价格、气温变化等。

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	数值系列，图表数值系列配置	数值系列	-
Y 轴配置	Y 轴配置，图表 y 轴配置	Y 轴配置	-
标题	标题，图表标题配置	标题	-
X 轴	X 轴，图表 X 轴配置	X 轴	-
图例	图例，图表图例配置	图例	-
提示框	提示框，图表提示框配置	提示框	-
key	唯一标识，组件唯一标识	string	组件 key 值

Props 数值系列

参数名	描述	类型	默认值
name	字段编码，数据字段编码	string	'value'
title	系列名，系列名称	string	'数值'
yAxisIndex	Y 轴索引，系列 Y 轴索引	string	-
lineStyle	线条样式，折线图线条样式	'solid'| 'dashed' | 'dotted'	'solid'
lineWidth	线宽，折线图线条线宽	string	2
lineColor	颜色，线条颜色	string	-
lineType	线条类型，折线图线条类型	'default' | 'smooth' | 'step'	'default'
areaStyle	面积填充，是否开启折线图面积填充	boolean	false
conncetNull	连接空数据，是否开启空数据连接	boolean	false
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'
customSeriesLine	自定义参数（series-line），	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 图例

参数名	描述	类型	默认值
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