line.zh.md

category	Components
type	Plot
usage	trend,time
title	Line 折线图
cover	https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EH-dTLnE4bcAAAAAAAAAAAAADmJ7AQ/original
link	/examples#statistics-line
order	1

简介

折线图用于展示数据的连续变化趋势，适用于时间序列分析、数据对比等场景。

代码演示

更多示例详见折线图

基础用法

平滑曲线

添加填充

通过配置 area 添加填充属性，同理 Area 也可以配置 line 属性。

多折线图

通过颜色通道 colorField 进行分组。

自定义颜色

可通过 scale: { color: { range: ['#30BF78', '#F4664A', '#FAAD14'] } }, 配置颜色映射关系，也可以通过 style.stroke: callback 进行精准匹配。

添加交互

以 brushXFilter 为例，可以通过鼠标刷选进行数据过滤，双击图表区域时候还原到初态，也可参考监听交互添加 reset 功能，详细交互见interaction。

添加事件

获取点击图表时映射的 X 数据，更多详见事件。

配置项

通用属性参考：通用配置

概览

配置项	说明	类型	默认值
data	数据	Array	[]
xField	横轴字段	string	-
yField	纵轴字段	string|string[]	-
seriesField	多折线图区分字段	string（可选）	-
colorField	和 seriesField 类似，不过会加上颜色通道，详见color	string（可选）	-
shapeField	绑定 line 标记的 shape 属性通道，改变图形标记的绘制形状	line | smooth | vh | hv | hvh | trail	line
sizeField	绑定 line 标记的 size 属性通道，改变图形标记的大小， 对于折线来说，size 视觉通道映射在线的宽度上	string（可选）	-
area	开启面积图，配置和面积图基本一致，默认继承了 Line 的 data | xField | yField 等属性，同时关闭了 tooltip，通过 style 指定绘图属性。	object(可选)	-
point	标记，配置和 area 类似，也继承了上层的一些通用配置，通过 shapeField 指定标记类型, 可通过 sizeField 指定标记大小，可以通过 style 指定绘图属性。	object(可选)	-
title	用于指定图表的标题内容，详见标题	object（可选）	-
axis	用于建立数据与视觉位置的映射关系，详见坐标轴	object（可选）	-
legend	图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选，详见图例	object（可选）	-
scrollbar	用于过滤数据，可以和 x 或者 y 通道绑定，详见滚动条	object（可选）	-
slider	用于过滤数据，让用户在数据量较大的情况下一次只用关注局部的数据，是一种辅助看数据的组件，详见滑块	object（可选）	-
label	数据标签是给图表添加标注的手段之一，详见标签	object（可选）	-
tooltip	用于动态展示数据点的详细信息，详见提示	object（可选）	-
style	视觉样式，配置项详见绘图属性	object（可选）	-
theme	用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见主题	string | object（可选）	light
onReady	图表加载回调，用于后续的事件事件绑定	Function（可选）	-
scale	将抽象数据映射为视觉数据，详见比例尺	object（可选）	-
animate	动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见动画	object（可选）	-
interaction	提供了按需探索数据的能力，详见交互	object（可选）	-
state	实现交互反馈、高亮、选中等效果，详见状态，不同交互下图表样式	object（可选）	-
stack	折线图是否堆叠	boolean	false
annotations	视图好比一个画板，Line 组件默认在其上绘制了一个折线图，我们可以通过 annotations 在上面叠加更多的图层，详见标注	Array（可选）	-

事件

详见选项-事件。

方法

详见图表概览-图表方法。

常见问题

1. 如何调整折线图两端间隔

scale: {
  x: {
    padding: 0,
  }
},

2. 如何让坐标轴文本自动旋转并换行

axis: {
  x: {
    size: 100,
    labelAutoRotate: true,
    labelAutoWrap: true
  }
},