〰️折线图

1.样式

在样式中可以设置组件的基本属性、全局、坐标轴、系列和提示框。

1.1基本属性

1.1.1位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

*尺寸调整不影响组件内容显示、组件动画。

*组件位置尺寸说明

1.1.2默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

1.2全局

在全局中支持配置组件边距、外间距、图例、数据动画等样式。

1.2.1边距

图表距离整个组件四边（上、下、左、右）的边距。

*边距样式说明

1.2.2外间距

曲线与图表外围的间距，取值范围0-1。

*外间距说明

1.2.3图例

在图例中可以调整组件的文本样式、图标尺寸、间距、布局、点击交互和未选中样式。

a. 文本样式

可对文本样式按需修改

b. 图标尺寸

自定义图例图标尺寸，基本折线图默认折线。

c. 间距

调整图例图标与文字之间的间距

d. 布局

在「布局」中支持进一步调整图例列数、间距、位置和偏移。

e.点击交互

开启「点击交互」后，可通过点击标签筛选并显示对应数据，关闭该功能后无法进行点击交互。

同时，可在「未选中样式」中配置透明度来区分未选中时的样式。

*点击交互 - 未选中样式

1.2.4轮播动画

开启后图表数据进行轮播，可设置滚动时长和动画间隔。

1.2.5数据动画

开启后首次加载和数据变化时会加载动画效果。

开启数据变化效果

关闭数据动画效果

1.3 坐标轴

组件坐标轴分为x轴、y轴、z轴，可通过「启用」来控制是否开启某一轴的数据。

如下图所示，当取消开启x轴后可以看到x轴和x轴的相关配置项消失。

*启用x轴

1.3.1 X轴

通过「启用」控制X轴显隐，可通过轴标签、轴线、刻度和网格线进行坐标轴样式配置：

其中，X轴标签分为类目型和时间型两个不同维度：

类目型：以类目为单位，标签名由数据源提供。

时间型：以时间为单位，如“2017-1-1”、“2017年01月01日”等，如下图

1.3.2 Y轴

通过「启用」控制Y轴显隐，可通过轴标签、轴单位、轴线、刻度和网格线进行坐标轴样式配置：

其中，Y轴标签支持以下刻度配置：

「数值范围」支持自定义输入，也支持系统选择，置空时系统根据数据中的最大/小值和指标点的个数自动计算；

「标签刻度」支持开启「刻度自适应」或设置「数量强制」和「步长强制」，非自适应情况下可自定义编辑标签、步长数量及小数位数；

数量强制

步长强制

1.3.3 Z轴

通过「启用」控制Z轴显隐，可通过轴标签、轴单位、轴线、刻度和网格线进行坐标轴样式配置：

其中，Z轴标签同样支持以下配置：

「数值范围」支持自定义输入，也支持系统选择，置空时系统根据数据中的最大/小值和指标点的个数自动计算；

「标签刻度」支持开启「刻度自适应」或设置「数量强制」和「步长强制」，非自适应情况下可自定义编辑标签、步长数量及小数位数；

1.4 系列

当图表数据存在多类型展示需求时，组件默认将数据划分成多个系列，用户可通过对各系列数据进行自定义数据映射，从而完成对每个系列配置相应样式。

其中，数据系列操作支持：

• 增加一个系列数据
• 删除一个系列数据
• 调整系列的显示格式（纵向展示、横向展示）

1.4.1 数据系列

*系列 - 数据映射 字段名和显示名

*系列 - 数值标签

1.5 提示框

1.5.1自动轮播

默认未开启，开启下提示框按轴标签横向轮播。

1.5.2 悬停触发

支持鼠标焦点移入到对应的数据点后会显示当前对应的数据提示框。

*悬停触发 提示框效果

1.5.3 提示框

提示框整体分为三部分，提示框样式、框内数据和指示器：

2 数据

2.1 组件数据格式

*组件数据格式说明

2.2 JSON数据案例

[
	{
		"x": "2010/01/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/01/01 00:00:00",
		"y": 320,
		"s": "系列二"
	},
	{
		"x": "2010/02/01 00:00:00",
		"y": 200,
		"s": "系列一"
	},
	{
		"x": "2010/02/01 00:00:00",
		"y": 120,
		"s": "系列二"
	},
	{
		"x": "2010/03/01 00:00:00",
		"y": 160,
		"s": "系列一"
	},
	{
		"x": "2010/03/01 00:00:00",
		"y": 180,
		"s": "系列二"
	},
	{
		"x": "2010/04/01 00:00:00",
		"y": 200,
		"s": "系列一"
	},
	{
		"x": "2010/04/01 00:00:00",
		"y": 160,
		"s": "系列二"
	},
	{
		"x": "2010/05/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/05/01 00:00:00",
		"y": 220,
		"s": "系列二"
	},
	{
		"x": "2010/06/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/06/01 00:00:00",
		"y": 220,
		"s": "系列二"
	}
]

2.3 数据配置项说明

2.4 数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

3 交互

3.1 载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

3.2 回调参数

回调参数可以理解为参数变量，用于控制组件之间参数的传递，从而达到交互的目的。

字段值即参数变量，变量名是对字段值的重命名

详细的回调参数教学👉 回调的使用

3.3 自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑。

详细的自定义事件教学👉自定义事件教学