折线图-元件区-有人云

**折线图用于在连续间隔或时间跨度上展示数值，常用来显示趋势和对比关系（多个折线之间的对比）。**

### **属性：**
**重命名：**点击元件名称右上角![](/Public/attached/20220221033259_17742.png)，输入元件名称，点击确定保存。为元件定义一个名称为了在元件交互式更快的定位到元件。
**图表尺寸：**包括元件的宽度和高度，单位为px。
**图表位置：**包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
**旋转角度：**以元件的中心为中心点，进行旋转，单位为度（°）。
**透明度：**取值范围为[0,1]。为0时，图表隐藏；为1时，图表全部显示。默认为1。
### **基础配置：**
#### 结构配置
![](/Public/attached/20220221040043_66025.png)
**绘图边距：**图表四个方向与组件边界的距离，单位为px。
**形式与线型：**展示形式包括折线、曲线、阶梯。线型包括实线、虚线、点线。
**区域缩放：**可配置元件区域缩放开关，当开启区域缩放后，元件底部出现区域缩放块，配置项出现起点缩放位置与重点缩放位置的百分比占比，可进行配置，单位为%。
**起点百分比**：默认70、根据需求调整
**终点百分比：**默认100、根据需求调整
#### 图例配置
![](/Public/attached/20220221040416_79536.png)
图例是什么，图例是元件右上角系列样式
文本颜色：文本的颜色
布局：包括位置与对齐方式，
- 位置：图例展示的位置
左侧：元件上方左侧展示
右侧：元件上方右侧展示
居中：元件上方居中展示
- 对齐方式：系列名称与色块展示主次

#### 坐标轴配置：组件坐标轴包括x轴和y轴两种。
##### X轴配置
![](/Public/attached/20220221040532_38106.png)
**显示状态：**打开开关，元件内x轴内容显示可见；关闭开关，元件内x轴内容不可见。
**坐标轴标记：**刻度线的显示与关闭，可单击图标![](/Public/attached/20220221034616_61119.png)控制坐标标记的显隐。
**绑定值：** X轴所绑定的字段值。当下方类型配置为时间轴时，需要选择时间类型字段。
**X轴类型：**x轴标签数据的类型，可选：
- 数值型：支持整数、浮点数等数值类型的数据。
- 类目型：支持字符、字符串等类目类型的数据。
- 时间型：时间类型的数据，需要配置数据格式。与绑定值配置的字段需匹配
**轴线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置轴线的粗细
- 颜色：支持设置轴线的颜色
**网格线：**x轴网格线的样式，可单击图标![](/Public/attached/20220221034616_61119.png)控制x轴网格线的显隐。
**网格线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置网格线的粗细
- 颜色：支持设置网格线的颜色
- 倾斜角度：X轴标记的倾斜角度

##### Y轴配置
![](/Public/attached/20220221040744_72046.png)
**显示状态：**打开开关，元件内y轴内容显示可见；关闭开关，元件内y轴内容不可见。
**单位：**体现Y轴数值的单位
**轴线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置轴线的粗细
- 颜色：支持设置轴线的颜色
**网格线：**Y轴网格线的样式，可单击图标![](/Public/attached/20220221034616_61119.png)控制Y轴网格线的显隐。
**网格线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置网格线的粗细
- 颜色：支持设置网格线的颜色

##### 系列配置
体现多个数据点在同一维度的占比，适用展示每部分与总量之间的关系。
![](/Public/attached/20220221040928_78606.png)
**添加数据系列：**单击右侧的加号图标![](/Public/attached/20220221035256_39613.png)，添加数据系列。
**删除数据系列:**点击系列名称右侧的删除图标![](/Public/attached/20220221035304_16202.png)，删除数据系列。
**曲线颜色**：该系列下曲线的颜色。
**系列名称：**数据系列的系列显示名称，可自定义。
**系列标识：**对应系列的数据，比如：设备的温度、湿度
**绑定值：**数据字段，指折线对应的值，比如：温度这个数据点此处展示的字段是温度值或时间等。
**数据堆叠：**可单击图标![](/Public/attached/20220221035417_23903.png)控制多条折线堆叠效果，注：此处多个系列同时开启数据堆叠可呈现出对应效果
![](/Public/attached/20220221041156_40900.png)
**堆叠面积图：**此系列下折线所覆盖区域的填充颜色，可单击图标![](/Public/attached/20220221035417_23903.png)控制该系列区域填充色的显隐。
![](/Public/attached/20220221041216_39369.png)
**展示效果：**控制堆叠区域顶部与底部的渐变色