主题
组件使用手册
组件是一系列具有动态特性和交互特性的图元库。
使用方法如下：
步骤一：拖拽组件到图纸
- 在组态编辑器中，点击左侧面板的组件Tab。
- 在基础中，找到相应的组件，然后将该组件拖拽到中间画布。
步骤二：配置组件
- 配置样式：选中拖到画面中的组件，在右侧面板中，配置相应的样式。
- 配置数据绑定：样式中有多个配置项支持配置数据绑定。
- 配置动画
- 配置交互动作
大部分组件查看相应的样式列表就可以掌握使用方法，对于一些需要进行特殊说明的组件，请参考《组态编辑器组件使用说明》。
基础组件
时钟
用于显示当前的年月日时分秒信息，可以设置显示格式。
值显示
值显示组件，通过数码字体显示数值，可对显示数值进行数据绑定。
趋势弹窗
如果值显示组件绑定了“数值”，在画面运行时双击该组件，会弹出相应的趋势图。 
趋势弹窗相关选项如下： 
网格位置：曲线所属的网格坐标，最大可以划分为 3X3 的网格。 Y轴名称：同一个网格下，允许出现多个 Y 轴，通过名称进行区分。 Y轴位置：Y轴默认在左侧显示，可设置为右侧显示。
值输出
用来输出写入的数值，通过配置相应的输出变量实现控制参数下发。
图片
用于插入图片资源，可以是 gif 格式的动态图。
iframe
iframe组件是网页设计中一个常见元素，主要用于将站点外的内容纳入页面中，外部站点iframe请连接网络后查看。
WARNING
iframe 组件的功能已经合并到子画面组件，v5.6 之后的版本请使用子画面组件。
html
用于插入 html 标签内容。
子画面
用于嵌入其它图纸画面或页面。
在子画面中显示图纸
将图纸拖到图元的访问地址输入框中。
在子画面中显示其它网页
直接在子画面图元的访问地址输入框中输入网页地址即可。
脚本方式修改子画面地址
javascript
var node = dm.getDataByTag('子画面的标签')
node.a('displayURL', 'displays/cq10fgkgj6lk4s4jvik0.json')开关
通过绑定开关变量，实现控制指令下发。 
指示灯
可用于显示状态变化，可通过绑定变量控制指示灯的颜色。 
进度条
可用于显示百分比或液位变化，支持水平和垂直方向切换。
进度指示器
环形进行指示器，功能与进度条类似，主要用于显示百分比。
液位指示器
水球形太的进度指示器，功能与进度条类似，可用于显示百分比或液位变化。
轮播图
循环播放用户自定义的图片内容。
地图
基于高德地图封装的控件，用于在图纸中显示地图，可设置多种地图主题风格。
表单
所有表单组件都有公共有【表单项】属性，如下图所示：
【表单项】属性：
| 属性 | 说明 |
|---|---|
| 表单名 | 表单项名称，当通过脚本获取表单值时，表单项的【表单名】属于会被用作表单对象的字段名。 |
| 必填 | 该表单项是否为必填项。 |
| 标签可见 | 标签文本是否可见。 |
| 标签内容 | 标签文本内容。 |
| 标签位置 | 标签位置，可选值为 right（右）、left（左）、top（上）。 |
| 标签宽度 | |
| 标签字体 |
按钮组
用于单项选择，控件值对应的按钮处于高亮状态。
数据源
JSON 数组，text 表示每个选项显示的文本、value 表示选项值。
json
[
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项3",
"value": "3"
}
]控件值：表单项值，类型为用户选中的 value 。
复选框
输入框
用于文本输入和展示的表单组件。
类型：支持 Text、Number、Password。
值输出：通过关联输出点，实现输入值触发指令下发。
获取或设置输入框值：
javascript
var inputNode = dm.getDataByTag('输入框的标签')
// 获取输入框的值
var value = inputNode.a('value')
// 修改输入框的值
inputNode.a('value', 100)文本域
用于多行文本输入和展示的表单组件。
获取或设置文本框值：同【输入框】。
控件值：表单项值，类型为用户输入的内容。
单选框
用于单项选择按钮。
数据源
JSON 数组，text 表示每个选项显示的文本、value 表示选项值。
json
[
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项3",
"value": "3"
}
]控件值：表单项值，类型为用户选中的 value 。
复选框
用于多项选择按钮。
数据源
JSON 数组，text 表示每个选项显示的文本、value 表示选项值。
json
[
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项3",
"value": "3"
}
]控件值：表单项值，类型为用户选中的 value 组成的数组。
选择框
用于下拉选择列表。
数据源
JSON 数组，text 表示每个选项显示的文本、value 表示选项值。
json
[
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项3",
"value": "3"
}
]控件值：表单项值，类型为用户选中的 value 。
开关按钮
可用于显示【开关】状态，也可用于执行反控。
控件值：表单项值，类型布尔型，【开】状态为 true，【关】状态为 false。
输出变量：通过关联输出点，实现触发反控。
控制方式
- 置1：将输出变量设置为 1。
- 清0：将输出变量设置为 0。
- 取反：如果控件值为 true，将输出变量设置为 0。如果控件值为 false，将输出变量设置为 1。
- 按 1 松 0：鼠标按下时，将输出变量设置为 1；鼠标松开时，将输出变量设置为 0。
- 按 0 松 1：鼠标按下时，将输出变量设置为 0；鼠标松开时，将输出变量设置为 1。
自定义图标
选中“自定义样式”，将图库中的相应元素分别拖到“合图标”和“分图标”，可设置不同状态下开关显示的图标。
日期选择
可用于选择日、周、月、日期时间、时间。
类型
- date：日期选择，格式始终为
yyyy-mm-dd。 - month：月选择，格式始终为
yyyy-mm。 - week：周选择，格式为
yyyy-mm-dd。 - datetime: 日期时间，格式为
yyyy-mm-dd HH:MM，如果开启了称级支持，则格式为yyyy-mm-dd HH:MM:ss - time: 时间，格式为
HH:MM，如果开启了称级支持，则格式为HH:MM:ss
控件值：表单项值，类型为字符串，格式请取决于类型。
最大值：所接受最新的日期，格式请取决于类型。
最小值：所接受最早的日期，格式请取决于类型。
日期范围选择
可用于选择日期时间范围。
类型
- date：日期选择，格式始终为
yyyy-mm-dd。 - month：月选择，格式始终为
yyyy-mm。 - datetime: 日期时间，格式为
yyyy-mm-dd HH:MM，如果开启了称级支持，则格式为yyyy-mm-dd HH:MM:ss
控件值：表单项值，类型为字符串数组，格式请取决于类型。
最大值：所接受最新的日期，格式请取决于类型。
最小值：所接受最早的日期，格式请取决于类型。
容器
边框容器
可在上、下、左、右、中的五个区域位置摆放子组件。常用于页面的整体布局。
关联节点
将列表中的节点拖到【边框容器】对应位置的【关联节点】输入框中，可将元素节点关联到边框容器的不同位置。如下图所示：
IMPORTANT
可将元素节点关联到边框容器后，当容器尺寸发生变化时，可以关联的节点会自动吸附到相应位置。
解除关联
点击关联节点右侧的删除按钮，可以解除关联关系。
水平盒
水平盒用于对容器子元素进行水平布局。使用水平盒容器，只需要将元素为容器的子元素即可。
子元素对齐
通过修改子元素【布局】面板中的纵向属性，可设置元素在纵向的对齐方式。
- 上：上对齐；
- 下：下对齐；
- 中心：居中对齐；
- 上&下：元素高度自动适配父容器。
宽度自适应
如果将子元素【布局】面板中的Flex属性设置为大于 0 的值，那么子元素的宽度将自动进行弹性伸缩。
如果有多个子元素的 Flex 大于 0，则根据 Flex 的权重自动计算宽度。
垂直盒
垂直盒用于对容器内的子元素进行垂直布局。使用垂直盒容器，只需要将元素为容器的子元素即可。使用方式上与水平盒相同。
流式容器
流式容器用于对容器内的子元素进行动态布局。
布局方向为水平时，对子元素进行水平排列，并支持自动换行。
布局方向为垂直时，对子元素进行垂直排列，并支持自动换行。
标签页面板
标签页组件主要用于不同面板的切换显示。
数据源
标签页数据源是一个 JSON 格式的对象数组。用于定义每个标签页的文本和值。
示例：
json
[
{
"text": "Tab1",
"value": "1"
},
{
"text": "Tab2",
"value": "2"
},
{
"text": "Tab3",
"value": "3"
}
]当切换标签页时，将自动对面板页面板的子元素进行切换显示。子元素的显示顺序与标签页一致。
关联子画面
标签页可以结合子画面组件一起使用，当切换不同的标签页时，可以触发子画面内容的切换。
下面是基本操作步骤，详细使用也可以参考我们的视频教程。
- 步骤1 ：将子画面拖到画布中；
- 步骤2：将节点列表中的子画面拖到标签页【关联子画面】属性的输入框中；
- 步骤3：点击标签页数据源编辑按钮，在对话模式中添加相应的标签页并关联子画面地址。
文本
文本盒
用于多行文本显示，支持根据文本内容自动缩放显示，不启用自动绽放可以显示滚动条。
艺术字
平台预置的特殊字体样式，用于展示标题等内容。
图表
全局样式
除【表格】外的所有图表组件，都具有相同的【全局样式】
渲染模式
ECharts 支持两种渲染器：SVG 渲染器和 Canvas 渲染器。默认采用 SVG 渲染器。
自定义选项
【图表】组件基于 ECharts 实现，用户可以通过脚本方式对图表的 Option 参数进行自定义设置。如下图所示：
标题
可设置组件的标题内容、颜色、位置、字体等。
副标题可通过自定义选项，在脚本中进行设置：
javascript
option.title.subtext = '我是副标题'
边距
用于设置图表组件与容器上下左右边缘的距离。
图例
图例展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
提示信息
用于设置如何在提示框中显示提示信息。
折线图
支持自定义、实时数据、历史数据 3 种数据源类型。实时数据和历史数据用于显示变量的实时曲线和历史曲线，支持多变量选择。自定义数据类型，由用户自己定义字段内容。
WARNING
注意 X 轴默认为类目轴，如果用户自定义数据内容对应 X 轴的字段为时间类库，需要手动修改 X 轴为时间轴。
柱状图
支持自定义、实时数据 2 种数据源类型。实时数据用于显示变量的实时值，每个变量对应一个类目。自定义数据类型，由用户自己定义字段内容。 标签格式 当设置为标签可见时，可以自定义标签格式： 
标签格式模板变量有：
- {a}：系列名。
- {b}：数据名。
- {c}：数据值。
- {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
- {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
示例：'{b}: {@score}'
折线柱图
只支持自定义格式的数据，每个数据系列可以单独设置图形类型（线状图或柱状图）。
水平柱图
使用方式同折线柱图。需要注意的是 X 轴为数值轴，Y 轴为类目轴。
水平胶囊图
使用方式用水平柱图。
散点图
只支持自定义格式的数据，支持多个数据系列显示。
饼状图
支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。
玫瑰图
使用方式同饼状图。
环形柱图
支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。
雷达图
支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。
仪表盘
支持单个数值显示，可直接绑定数据源。
媒体
视频
用于MP4、MOV、AVI等的视频文件的播放控件。
音频
用于MP3、WAV ， FLAC等的音频文件的播放控件，可绑定变量控制播放启停。
FLV视频
FLV 协议视频流播放控件。
HLS视频
HLS 协议视频流播放控件。
RTSP视频
RTSP 协议视频流播放控件。 
CAUTION
播放 RTSP 协议视频流需要依赖 H5 流媒体转换服务，需要配置转换服务器地址和 RTSP 播放地址，具体使用方式请联系技术支持。