折线图

介绍

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

API

Props

参数	说明	类型	默认值
默认状态	支持变量绑定	默认 / 隐藏	默认
数据堆叠	折线图是否开启堆积	Boolean	false
数据源	支持变量绑定	DataSource	-
x 轴（类目）	类目的数据字段编码	string	year
y 轴（数值）	数值系列的数据字段编码	Array	[{name:sale1},{name:sale2}]
宽	图表画布宽度	string	500px
高	图表画布高度	string	300px
上边距	绘图区域距离画布上边距	string	60px
下边距	绘图区域距离画布下边距	string	60px
左边距	绘图区域距离画布左边距	string	10%
右边距	绘图区域距离画布右边距	string	10%
数值系列	图表数值系列配置	数值系列	-
Y 轴配置	图表 y 轴配置	Y 轴配置	-
标题	图表标题配置	标题	-
X 轴	图表 X 轴配置	X 轴	-
图例	图表图例配置	图例	-
提示框	图表提示框配置	提示框	-
唯一标识	组件唯一标识	string	组件 key 值

Props 数值系列

参数	说明	类型	默认值
字段编码	数据字段编码	string	value
系列名	系列名称	string	数值
Y 轴索引	系列 Y 轴索引	string	-
线条样式	折线图线条样式	实线/虚线/点线	实线
线宽	折线图线条线宽	string	2
颜色	线条颜色	string	-
线条类型	折线图线条类型	折线/曲线/阶梯图	折线
面积填充	是否开启折线图面积填充	boolean	false
连接空数据	是否开启空数据连接	boolean	false
显示标记	系列是否显示标记	boolean	false
标记大小	标记图形大小	string	8
标记类型	标记图形类型	string	circle
显示标签	系列是否显示标签	boolean	false
字号	标签字号	string	12
颜色	标签颜色	string	#FFF
自定义参数（series-bar）		code

Props Y 轴配置

参数	说明	类型	默认值
显示 Y 轴	图表 Y 轴是否显示	boolean	true
位置	Y 轴位置	string	左侧
显示轴线	图表轴线是否显示	boolean	true
线宽	轴线线宽	string	1
轴线颜色	轴线颜色	string	#333333
显示刻度标签	图表是否显示刻度标签	boolean	true
刻度数量	刻度标签数量，参考值	number	5
字号	刻度标签字号	number	12
字体粗细	刻度标签字体粗细	string	normal
文字颜色	刻度标签文字颜色	string	-
分隔线	是否显示 X 轴分隔线	boolean	true
分隔线颜色	分隔线颜色	string	#CCCCCC
自定义参数（yAxis）		code

Props 标题

参数	说明	类型	默认值
显示标题	图表标题是否显示	boolean	false
主标题	图表主标题	string	主标题
副标题	图表副标题	string	副标题
自定义参数（title）		code

Props X 轴

参数	说明	类型	默认值
显示 X 轴	图表 X 轴是否显示	boolean	true
显示轴线	图表轴线是否显示	boolean	true
线宽	轴线线宽	string	1
轴线颜色	轴线颜色	string	#333333
显示刻度标签	图表是否显示刻度标签	boolean	true
字号	刻度标签字号	string	12
字体粗细	刻度标签字体粗细	string	normal
文字颜色	刻度标签文字颜色	string	-
角度	刻度标签倾斜角度	string	-
分隔线	是否显示 X 轴分隔线	boolean	true
分隔线颜色	分隔线颜色	string	#CCCCCC
显示指示器	是否显示 X 轴指示器	boolean	true
指示器类型	指示器类型	阴影/直线	阴影
自定义参数（xAxis）		code

Props 图例

参数	说明	类型	默认值
显示图例	图表图例是否显示	boolean	true
图例位置	图例显示位置	自动 / 顶部居左 / 顶部居中 / 顶部居右 / 底部居左 / 底部居中 / 底部居右 / 左侧顶部 / 左侧居中 / 左侧底部 / 右侧顶部 / 右侧居中 / 右侧底部	自动
布局方向	图例排列方向	水平 / 竖直	水平
宽	图例区域宽度	string	auto
高	图例区域高度	string	auto
支持滚动	图例超出宽高后是否支持滚动	boolean	false
自定义参数（legend）		code

Props 提示框

参数	说明	类型	默认值
显示提示框	图表提示框是否显示	boolean	true
触发类型	提示框触发类型	数据项/坐标轴	数据项
背景颜色	提示框背景颜色	string	rgba(50,50,50,0.7)
边框颜色	提示框边框颜色	string	#333333
文字颜色	提示框文字颜色	string	#FFFFFF
字号	提示框文字字号	string	14
自定义参数（tooltip）		code

Type

DataSource

[
  {
    year: "2018",
    sales1: "500",
    sales2: "600",
  },
  {
    year: "2019",
    sales1: "900",
    sales2: "100",
  },
  {
    year: "2020",
    sales1: "1200",
    sales2: "300",
  },
  {
    year: "2021",
    sales1: "2000",
    sales2: "900",
  },
  {
    year: "2022",
    sales1: "1800",
    sales2: "2100",
  },
  {
    year: "2023",
    sales1: "200",
    sales2: "900",
  },
];