图表元件-元件库-有人云

![](/Public/attached/20200521112235_13776.png)
图标元件包括：变量值、变量值图片、指示灯、流动条、仪表盘、气温仪表盘、数据曲线图、数据折线图、曲线面积图、折现面积图、柱状图、数据表格、报警表格、饼图、常规环形图、圆角环形图、计量器、水位图、设备状态、网页、视频。

### 变量值
变量值元件以绑定变量的数据做为动态数据源来展示数值或配置的内容，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、翻译内容、动效、交互事件（按下、弹起、单击、双击），下面会针对”翻译内容”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
设置翻译内容
设置所绑定变量不同值代表的内容，比如变量温度为”100”时翻译成”高温”进行展示；点击设置翻译内容右侧的图标”时，出现设置翻译内容的弹窗，设置最小值和最大值和达到触发值时对应展示的内容，最多可以添加20条。
注意：设置的最小值和最大值代表最小值至最大值的范围，组态运行时当达到这个范围后便会展示设置的翻译内容。最大值和最小值相等时，触发值就是这个相等的值，例如最大值和最小值都设置为10 ，当组态运行后，绑定变量的数值达到10后便会展示设置的翻译内容。
如果配置过翻译规则后，在组态画面中进行变量值元件交互时，为便于用户记忆，在弹框中可以看到设置的翻译规则。
![](/Public/attached/20240729110658_36182.png)
![](/Public/attached/20240729110707_12926.png)
### 变量值图片
变量值图片主要用于当变量处于不同的值时显示不同的图片，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、设置变量图片、交互事件（按下、弹起、单击、双击），下面会针对”设置变量图片”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
#### 设置变量图片
点击设置翻译内容右侧的图标””时，出现设置翻译内容的弹窗，设置最小值和最大值以及对应图片和对应的颜色，最多可以添加9条，点击应用按钮设置成功。
最小值和最大值：设置的最小值和最大值代表最小值至最大值的范围，最大值和最小值相等时，触发值就是这个相等的值。
对应图片：支持选择本地图片和系统图片，运行组态后所绑定的变量值达到触发值便会展示对应的图片；
对应颜色：点击图标””时，出现拾色器，选择想要的颜色，运行组态后所绑定的变量值达到触发值便会展示对应的颜色；
![](/Public/attached/20200521113303_91963.png)
### 指示灯
在数据配置中支持配置该元件的标题、数据来源、状态设置，下面会针对改元件的”状态设置”进行详情介绍，其他通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
状态设置：
点击状态设置字段右侧的图标””，出现状态设置的弹窗。指示灯的状态有开启和关闭两种状态，设置状态的触发值和展示图片，点击”应用”完成状态设置。
在弹窗上点击”展示图片”字段下的图片可以更换图片，开启状态的触发值默认为1，关闭状态的触发值默认为0。
### 流动条
流动条元件主要用于展示一些水流等效果，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、设置流向，下面会针对”设置流向”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中流动条元件不支持设置位置和尺寸，支持设置背景颜色、流动条颜色，角度、背景颜色请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
####  设置流向
当绑定的变量处于不同的值时触发该元件的不同流向。点击设置流向右侧的图标””时，出现设置流向的弹窗，选择水流效果、设置最小值和最大值，最多可以设置20条，点击”应用”按钮完成设置。
水流效果：水流效果有7种，主要为正向流动、反向流动、停止流动、快速正向流动、慢速正向流动、快速反向流动、慢速反向流动；
最小值和最大值：设置的最小值和最大值代表最小值至最大值的范围。运行组态后所绑定的变量值达到触发值便会显示不同的水流效果。
![](/Public/attached/20200521113343_49376.png)
##### 仪表盘
该元件支持”数据”和”样式”配置。
在数据配置中支持配置该元件的数据来源、最小刻度、最大刻度的，数据来源通用配置项参见数据配置
在样式配置中支持配置该元件的位置、尺寸、角度、文本字体、字号大小、颜色、外观，下面会详细介绍外观设置，其他通用设置详情参见样式配置
刻度设置：最小刻度默认为0，最大刻度默认为100，支持自定义设置
外观设置：外观支持设置背景颜色、刻度颜色、刻度标签颜色、刻度标签字号、面板颜色、指针颜色、区间颜色、不透明度。
![](/Public/attached/20240729112020_11785.png)
### 气温仪表盘
该元件支持”数据”和”样式”配置。
在数据配置中支持配置该元件的数据来源、变量值单位，数据来源通用配置项参见数据配置
在样式配置中支持配置该元件的位置、尺寸、角度、文本字体、字号大小、颜色、外观，下面会详细介绍外观设置，其他通用设置详情参见样式配置
外观设置：外观支持设置背景颜色、轴线颜色、内区间颜色、外区间颜色、最小刻度、最大刻度、刻度分割线、刻度颜色、刻度标签意思呢、刻度标签字号、不透明度。
![](/Public/attached/20240729112315_10583.png)
### 数据曲线图
该元件主要用于查看绑定变量的实时数据或历史数据的趋势图，支持数据和样式配置。
在数据配置中，支持配置数据来源。数据来源支持选择实时数据或历史数据，需要绑定变量提供数据源，最多可以选择20个变量。
在样式配置中支持配置该元件的位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为曲线图时，外观支持设置背景颜色、坐标值颜色、坐标颜色、不透明度、图例状态、图例颜色、分割线状态、分割线颜色、Y轴自适应、不透明度。
![](/Public/attached/20240729113217_20729.png)
### 数据折线图
该元件主要用于查看绑定变量的实时数据或历史数据的趋势图，支持数据和样式配置。
在数据配置中，支持配置数据来源。数据来源支持选择实时数据或历史数据，需要绑定变量提供数据源，最多可以选择20个变量。
在样式配置中支持配置该元件的位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为折线图时，外观支持设置背景颜色、坐标值颜色、坐标颜色、不透明度、图例状态、图例颜色、分割线状态、分割线颜色、Y轴自适应、不透明度。
![](/Public/attached/20240729113350_87596.png)
### 曲线面积图
该元件主要用于查看绑定变量的实时数据或历史数据的趋势图，支持数据和样式配置。
在数据配置中，支持配置数据来源。数据来源支持选择实时数据或历史数据，需要绑定变量提供数据源，最多可以选择20个变量。
在样式配置中支持配置该元件的位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为曲线面积图时，外观支持设置背景颜色、坐标值颜色、坐标颜色、不透明度、图例状态、图例颜色、分割线状态、分割线颜色、Y轴自适应、不透明度。
![](/Public/attached/20240729115323_45381.png)
### 折线面积图
该元件主要用于查看绑定变量的实时数据或历史数据的趋势图，支持数据和样式配置。
在数据配置中，支持配置数据来源。数据来源支持选择实时数据或历史数据，需要绑定变量提供数据源，最多可以选择20个变量。
在样式配置中支持配置该元件的位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为折现面积图时，外观支持设置背景颜色、坐标值颜色、坐标颜色、图例状态、图例颜色、分割线状态、分割线颜色、Y轴自适应、不透明度。
![](/Public/attached/20240729115546_58763.png)
### 柱状图
该元件主要用于查看绑定变量的实时数据的趋势图和分布分析，支持数据和样式配置。
在数据配置中，支持配置数据来源。数据来源支持选择实时数据，需要绑定变量提供数据源，最多可以选择20个变量。
在样式配置中支持配置该元件的位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为折现面积图时，外观支持设置背景颜色、柱形背景、坐标值颜色、坐标颜色、分割线状态、分割线颜色、Y轴自适应、数值状态、数值颜色、排序（默认、从大到小、从小到大）、不透明度。
![](/Public/attached/20240729022111_26829.png)
### 数据表格
该元件主要用于展示实时数据或历史数据的报表，支持数据和样式的配置。
在数据配置中支持配置该元件的标题、数据来源和功能；
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、背景颜色、边框颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
表格类型：该元件支持选择实时数据表格或历史数据表格；
功能：用于配置数据表格的数据来源，最多可以绑定20个变量。
支持自定义表格，自定义列名和可见性。
![](/Public/attached/20240729023245_74838.png)
![](/Public/attached/20240729023427_68565.png)
### 报警表格
该元件主要用于展示实时报警数据或历史报警数据的报表，支持数据和样式的配置。
在数据配置中支持配置该元件的标题、数据来源和功能；
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、背景颜色、边框颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
表格类型：该元件支持选择实时报警数据表格或历史报警数据表格；
功能：用于配置数据表格的数据来源，最多可以绑定20个变量。
支持自定义表格，自定义列名和可见性。
![](/Public/attached/20240729023814_32950.png)
![](/Public/attached/20240729023823_21274.png)
### 饼图
该元件主要用于展示不同变量数据之间的占比，支持数据和样式的配置。
在数据配置中支持配置该元件的数据来源；在数据来源中最多可以绑定20个变量，支持设置每个变量的展示颜色
在样式配置中支持配置该元件的位置、尺寸、角度、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
![](/Public/attached/20240729024717_40361.png)
### 常规环形图
该元件主要用于展示不同变量数据之间的占比，支持数据和样式的配置。
在数据配置中支持配置该元件的数据来源；在数据来源中最多可以绑定20个变量，支持设置每个变量的展示颜色
在样式配置中支持配置该元件的位置、尺寸、角度、背景颜色、内环比例、外环比例、数值状态、图例状态、图例颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
![](/Public/attached/20240729025446_30766.png)
### 圆角环形图
该元件主要用于展示不同变量数据之间的占比，支持数据和样式的配置。
在数据配置中支持配置该元件的数据来源；在数据来源中最多可以绑定20个变量，支持设置每个变量的展示颜色
在样式配置中支持配置该元件的位置、尺寸、角度、背景颜色、内环比例、外环比例、圆角度值、数值状态、间隙值、描边线宽、描边颜色、图例状态、图例颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
![](/Public/attached/20240729025500_27126.png)
### 计量器
计量器元件主要用于测量，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、展示类型、最小刻度、最大刻度的，标题、数据来源通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的位置、尺寸、角度、文本字体、字号大小、颜色、外观，下面会详细介绍不同展示类型的外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
展示类型：展示类型分为温度计、棒图两种。
刻度设置：展示类型为温度计和棒图时，需要设置最小刻度和最大刻度，展示类型为容量器时需要设置最大刻度。绑定变量的值大于设置的最大值或小于设置的最小刻度值时按照刻度的最大值或最小值显示。
外观设置：
展示类型为温度计，外观支持设置液位颜色、边框颜色、填充颜色、背景颜色；
展示类型为棒图时，外观支持设置填充颜色、刻度颜色、背景色；
![](/Public/attached/20240729045304_76226.png)
![](/Public/attached/20240729045319_22645.png)
### 水位图
水位图元件主要用于测量，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的数据来源、最大刻度，数据来源通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、颜色、外观，下面会详细介绍不同展示类型的外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
刻度设置：设置最大刻度值。
外观设置：外观支持设置外层圆圈颜色、波浪划过文字的颜色、波浪颜色；
![](/Public/attached/20240729045333_59761.png)
### 设备状态
设备状态元件主要是用于展示设备在线、离线、报警三种状态，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、状态图片。
在样式配置中流动条元件不支持设置位置和尺寸，支持设置角度、不透明度，详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
状态图片：
设置设备在线、离线、报警三种状态对应的显示图片，支持从本地和系统图片中选择。
![](/Public/attached/20240729045348_85492.png)
### 网页
网页元件是组态设计中的一个常见元素，主要用于将站点外的内容纳入到页面中，支持配置数据和样式。
在数据配置中支持配置网页元件的标题和链接。在功能分类下的网页链接字段中配置URL地址。
在样式配置中支持设置位置、尺寸、角度，配置详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
![](/Public/attached/20240729045402_78017.png)
### 视频
视频元件主要应用于在组态画面的视频播放，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源（独立组态）、视频播放形式。
在样式配置中支持设置位置、尺寸、角度、不透明度，配置详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
![](/Public/attached/20240729045415_73416.png)
数据来源：设计的组态为独立组态时，需要关联设备。被关联的设备如果没有绑定摄像头该元件则无法正常使用。
视频播放：勾选自动播放时，组态运行时视频元件处于自动播放状态；未勾选自动播放时，组态运行时，需要手动点击视频元件才可以播放视频画面。
注意：在手机端运行时，该元件只支持手动播放。若需要集成多个视频创建多个播放器即可实现，但需要注意的是集成多个播放器需要注意单个播放器的长宽比例限制最小为{w: 400px;h: 300px;}（chrome浏览器限制），小于这个大小时自动播放会失效。