# 折线图
折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。
# 属性
# 基础
组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为
px。旋转角度： 组件在大屏中旋转的角度。
透明度： 组件的透明度。
背景颜色： 组件的背景颜色。
系列颜色： 折线的颜色。支持颜色填充，默认情况下折线的颜色为主题的颜色。
基础样式 同 饼图属性 -> 基础样式 3.0+
# 系列
折线图适合二维的大数据资源，尤其是那些趋势比单个数据点更重要的场合。它还适合多个二维数据资源的比较。
系列 1：
类型： 柱状和折线的转换。
堆叠名： 系列中堆叠名称相同者堆叠在一起。
顺序： 控制图形的层级顺序。值小的图形会被值大的图形覆盖。
Y 轴索引： 绑定 Y 轴的图表显示。
数据标注： 是否显示最大值、最小值的数据标注。
警告：
数据标注只有在柱状图或折线图上可用，堆叠柱状图和折线堆叠图上不可用。
- 显示平均线： 是否显示同一系列的平均线。
折线设置： 该系列下折线的设置。
平滑曲线： 折线是否为平滑曲线。
线颜色： 折线的颜色。
宽度： 折线的宽度。
类型： 折线的类型。
折线样式： 该系列下折线样式的设置。
渐变色： 是否添加渐变色。
是：
渐变色方向： 渐变色的方向，可为
正下到正上，左下到右上，右上到左下。渐变色范围设置： 设置渐变色的颜色范围。
否：
- 颜色： 控制柱的颜色。
普通状态
文本标签： 指折线拐点处上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，回调函数返回的字符串可以用
\n换行。支持从HETU内置函数中获取变量值。2024.5+字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。例如：
{b}: {c}
回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据资源。格式如下：{ // 数据名，类目名 "name": string, // 传入的原始数据项 "data": Object, // 传入的数据值 "value": number | Array, // 百分比 "percent": number }位置： 文本标签上值的位置。
文字距离： 文本间的距离，首先需要选择标签的位置，才能定义文本间的距离。
文字旋转： 文字旋转角度。
文字偏移： 文字相对于原本位置的偏移。
水平对齐： 文字在水平方向上的对齐方式。
垂直对齐： 文字在垂直方向上的对齐方式。
宽高： 文本标签的宽度和高度。
超出宽度： 文字超出宽度的处理方式。
字体颜色： 修改字体的颜色。
字体大小： 修改字体的大小。
字体粗细： 修改字体的粗细，可为
普通和加粗和更细，默认为普通。字体： 修改字体的样式。
拐点样式
拐点图形： 折线拐点处的图形，见 组件管理 -> 属性 -> 图标选择器。 4.5+
隐藏底部图形： 折线拐点底部的图形是否隐藏。
颜色： 图形整体颜色。
描边颜色： 图形描边颜色。
描边线宽： 图形描边宽度。
描边类型： 图形描边类型。
阴影属性： 折线拐点图在垂直方向和水平方向上的阴影，同时可以设置折线拐点图的模糊效果。
图表标线： 见 组件管理 -> 属性 -> 图表标线。4.2+
标签布局： 见 组件管理 -> 属性 -> 标签布局。4.3+
初始动画： 对组件动画的配置。
开启动画： 组件是否启用动画。
动画时长(ms)： 动画的时长。
缓动效果： 动画的缓动效果。
数据映射： 同 饼图属性 -> 系列 -> 数据映射 。3.0+
# 视区
显示： 是否显示直角坐标系网格。
左边距： 离容器左侧的距离。
右边距： 离容器上侧的距离。
上边距： 离容器右侧的距离。
下边距： 离容器下侧的距离。
# X 轴
显示坐标： 是否显示 x 轴坐标。
坐标轴位置： x 轴的的坐标显示位置。
坐标轴名称： x 轴的坐标名称。
坐标轴名称位置： 坐标轴名称的显示位置。开端、中端、末端。
坐标轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式，回调函数返回的字符串可以用
\n换行。支持从HETU内置函数中获取变量值。2024.5+字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口百分比： 滑块所占数据窗口的百分比。
滑块组件高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑块区域背景： 滑块区域背景颜色。
滑动显示文本： 是否滑动显示文本。
锁定滑块： 是否锁定滑块。
线条颜色： 线条颜色。
线条宽度： 线条宽度。
线条类型：
- 实线
- 虚线
- 点线
# Y 轴
Y 轴 1
显示坐标： 是否显示 y 轴坐标。
坐标轴位置： y 轴的坐标显示位置。
坐标轴名称： y 轴的坐标名称。
坐标轴名称位置： 坐标轴名称的显示位置。
坐标轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
坐标区间： y 轴坐标值的取值范围。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式，回调函数返回的字符串可以用
\n换行。支持从HETU内置函数中获取变量值。2024.5+字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
data： 刻度默认文本。
index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置。
- 显示： 是否显示轴线。
- 颜色： 轴线颜色。
- 宽度： 轴线宽度。
- 类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
刻度线颜色： 刻度线的颜色。
刻度线宽度： 刻度线的宽度。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口百分比： 滑块所占数据窗口的百分比。
滑块组件高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑块区域背景： 滑块区域背景颜色。
滑动显示文本： 是否滑动显示文本。
锁定滑块： 是否锁定滑块。
线条颜色： 线条颜色。
线条宽度： 线条宽度。
线条类型：
- 实线
- 虚线
- 点线
- Y 轴 2：与Y 轴 1属性配置相同。
# 标题
显示标题： 是否显示标题
内容：
标题
- 主： 主标题内容。
- 副： 副标题内容。
超链接
- 主： 主标题超链接。
- 副： 副标题超链接。
位置
- 水平对齐
- 垂直对齐
外观
内边距
主副间隔
主标题文本样式
字体颜色： 主标题字体颜色。
字体大小： 主标题字体大小。
字体粗细： 主标题字体粗细。
字体： 主标题字体样式。
副标题文本样式
字体颜色： 副标题字体颜色。
字体大小： 副标题字体大小。
字体粗细： 副标题字体粗细。
字体： 副标题字体样式。
# 图例 3.0+
- 属性同 柱状图属性 -> 图例。
# 提示框
# 工具栏
显示工具栏： 是否显示工具栏。
功能按钮
保存为图片按钮
还原按钮
数据视图按钮
位置朝向
排列方式： 功能按钮的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
图表尺寸
- 图标大小
- 间隔
# 时间轴 3.0+
- 属性同 饼图属性 -> 时间轴 。
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"x": "一月",
"y1": 9,
"y2": 7,
"y3": 6
},
{
"x": "二月",
"y1": 2,
"y2": 3,
"y3": 7
},
{
"x": "三月",
"y1": 3,
"y2": 5,
"y3": 3
},
{
"x": "四月",
"y1": 3,
"y2": 2,
"y3": 6
},
{
"x": "五月",
"y1": 6,
"y2": 6,
"y3": 9
}
]
x： 维度，各折线的转折点。
y1： 度量，系列 1 折线的值。
y2： 度量，系列 2 折线的值。
y3： 度量，系列 3 折线的值。
# 数据资源
# 交互
# 标记单击事件
勾选启用，开启组件交互功能。当单击折线图标记时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# X 轴标签单击事件
勾选启用，开启组件交互功能。当单击 X 轴标签时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# Y 轴标签单击事件
勾选启用，开启组件交互功能。当单击 Y 轴标签时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 标记悬停事件
勾选启用，开启组件交互功能。当悬停标记时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 标记移出事件
勾选启用，开启组件交互功能。当移出标记时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 数据响应
折线图支持数据响应配置。
# 数据上卷、下钻
折线图支持数据上卷、下钻功能。
# 节点编程
# 事件
标记单击事件： 标记单击触发事件。
- 抛出的参数： 标记所携带的数据。
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
标记悬停事件： 鼠标悬停到标记时触发。3.0+
- 抛出的参数： 标记所携带的数据。
标记移出事件： 鼠标移出标记时触发。3.0+
- 抛出的参数： 标记所携带的数据。
图例切换事件： 图表图例切换时触发。3.0+
- 抛出的参数： 切换的图例名称及选中状态。
时间轴切换事件： 时间轴节点切换时触发。3.0+
- 抛出的参数： 时间轴节点名称。
X 轴标签单击事件： X 轴标签单击时触发。3.0+
- 抛出的参数： 标签值。
Y 轴标签单击事件： Y 轴标签单击时触发。3.0+
- 抛出的参数： 标签值。
伸缩域改变事件： 伸缩区域改变时触发。3.0+
- 抛出的参数： 开始/结束位置的百分比值。
# 动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。
设置图例： 设置图例的选中状态。3.0+
{ "类型一": true, "类型二": false, "类型三": false }设置时间轴： 设置活动的时间轴节点。 3.0+
- 接受参数： 时间轴节点名称。例如：
{ "value": "2021" }