态势控件介绍
说明
数据源绑定前置条件
所有需通过数据源获取数据绑定的控件，必须先在Web可视化主界面完成数据源配置。- 操作路径：
主界面 → 数据源管理 → 添加数据源 - 📌 提示：未配置数据源的控件将无法正常获取动态数据
- 操作路径：
字段路径填写规范
通过数据源获取数据时，需将目标字段的完整路径按控件格式要求填写至对应字段：- 示例：
设备数据.传感器列表.温度值（使用点分符号逐级定位） - ⚠️ 注意：路径需与控件展示格式严格匹配（如表格控件需二维路径，文本控件需一维路径）
- 示例：
仪表盘控件(非表格控件)特殊处理
当绑定仪表盘类控件（如进度条、数值仪表）时：- 💡 推荐方案：优先使用设备表达式直接绑定（如：
$C1(4,1)） - 🔧 数据源方案：若必须使用数据源，需确保字段路径指向单个原子值（如：
/data/currentValue），而非数组或对象集合
- 💡 推荐方案：优先使用设备表达式直接绑定（如：
刷新时间配置说明
控件数据刷新间隔由关联数据源的请求频率决定：- 默认值：60秒（可在数据源配置界面修改）
# 基础控件
基础控件总览
下图为发工具的界面布局，整体布局清晰，功能分区明确，便于用户进行UI设计和开发工作。以下是详细的页面布局介绍：
顶部导航栏：
- 包含了多个功能按钮，如Control、Component、Image、Layer、Configuration、Property Panel、Settings、Preview、Full Scr...、Import、Export、Save、Release等。这些按钮提供了对画布显示、组件操作、图片管理、图层控制、配置调整、属性设置、预览、全屏显示、文件导入导出、保存以及发布等功能的快速访问。
左侧组件库：
- 列出了各种可用的UI组件，如Input、Textarea、Rectangle、Image、Value Label、Button、Tab、Line、Table、Snapshot List、Points Table、Equip Table、Progress、Number Scroll等。这些组件是用户在设计UI时可以直接拖拽到画布上的基本元素，方便用户快速构建界面。
中间画布区域：
- 这是一个空白的画布，用于放置和设计UI元素。用户可以在此区域自由地拖拽、调整组件的位置和大小，以构建出符合需求的界面。
- 画布上方有标尺，用于精确布局，帮助用户更准确地定位和调整组件的位置和大小，确保设计的界面符合预期。
右侧设置区域：
- 显示当前选中元素的设置选项，如Canvas Settings。用户可以在此区域调整画布的大小、背景颜色、背景图片等属性，以及设置其他与画布相关的选项。
- 具体的设置选项包括Size（1920 W x 1080 H）、Background Color（#202534）、Background Image、Adaptation、Refresh Time(s)、Home Page、Show Edit Icon、Filter、Thumbnail（Capture、Upload）等，满足了用户对画布和组件属性的多样化设置需求。
底部历史记录部分：
- 显示操作历史，用户可以通过查看历史记录来追溯之前的操作步骤，并在需要时进行撤销或重做，提高了设计的灵活性和效率。
# 单行文本控件
- 单行文本控件
- 功能：这是一个基础且常用的文本显示控件，专注于展示简洁的单行文本信息。用户可以通过双击该控件，快速进入编辑模式，轻松修改其显示的文本内容，以满足不同的文本展示需求。
- 外观与位置：在图片左上角，有一个带有“T”字样的图标，旁边标注“单行文本”，这便是单行文本控件的标识。
当用户选择该控件后，右侧会弹出一个属性面板，用户可以通过该面板对文本的样式进行细致调整，包括字体、颜色、大小等，同时也可以方便地修改文本内容。相较于单行文本控件，组态文本框组件提供了更为丰富的文本编辑和样式定制功能，能够充分满足用户对于文本展示的多样化需求。
# 多行文本控件
多行文本控件用于显示多行文本内容。
双击控件即可修改文字内容，如下图所示：
该控件与文本框控件之间的区别在于文本域文字过多的时候会自动切换到第二行显示内容。文字域中的文字颜色，字号等样式设置操作与文本框控件相同。
# 矩形框控件
矩形框是一个常用的布局控件。
在页面制作中经常被作为背景面板来使用，如下图所示。
# 图片控件
图片控件是一个装载图片的控件,其功能就是显示图片。
拖动一个图片控件到画布中后，选中图片控件，在属性栏的“外观”中单击“图片选择”按钮，然后选择或上传一个需要的图片即可。
# 值文本框控件
值文本框控件是一个支持敢为数据（关于敢为数据功能，将在核心功能介绍章节讲解）的文本控件,用于显示实时数据或者状态。
创建并选中值文本框控件后，在右侧的属性列中找到"值表达式"，在文本框中可以手动输入正确的值表达式也可以点击文本框末尾图标选择设备号生成表达式(选择表达式时，要先选择表达式类型，再根据要求选择遥测点或遥信点，再点击下图中的生成表达式即可),如下图所示。
该控件绑定表达式值后在查看态势页面显示实时数据，如下图所示：
# 敢为按钮控件
敢为按钮控件是一个可以执行控制命令的按钮。同样的，此控件支持敢为数据功能。
此外，我们还可以通过在"点击设置"文本框中绑定表达式，来执行相应的设置命令。
点击设置表达式格式为：S:设备号,设置号+设备号,设置号+...。通过该表达式可以执行单个或多个控制命令；其中"+"用于连接多个控制命令。
如上图所示，敢为按钮绑定设置表达式后，在查看页面单击该按钮，即可触发控制命令，并返回设置成功或设置失败等提示。
# Tab控件
Tab控件是一个分页控件，用于制作标签式页面或选项卡。
框选住同一组的分页控件，在右侧属性栏中单击"数据"选项卡，在"Tab数据"栏中为这些分页控件设置一个共同的tab组。选中某个Tab控件可以在外观文本内容中更改tab控件中的文字，如图所示。
Tab控件可以设置选中和未选中状态时的文字颜色，背景图片或颜色等，其操作如下所示(红色方框选中的是设置Tab控件选中时的样式，为选中时的样式更改与文本框样式更改一样配置)：
Tab控件绑定好Tab组后，将需要进行分页显示的控件选中，在右侧属性数据中找到所属tab,然后选中自己要绑定那个Tab控件即可(tab所属选项是整个态势页面所有的tab控件的文本内容显示集合)，如下图所示：
上面所示的就是控件绑定tab的操作,如果想要点击上图内容文本为11的tab控件后显示图片，就只需点击右侧所属tab中选中11即可，显示如下：
tab控件可以设置轮播，也可以通过绑定设备号等数值与三维进行关联。其设置分别位于右侧数据栏中的是否轮播和三维互联设置中。
# 线条控件
顾名思义，线条控件是一个用于生成线条的控件，多用于连接各类控件。
右侧的属性列中可以设置线条控件的连线类型，可以生成曲线、线段、直线和脑图曲线等类型的线条，如下图所示。
# 数据库表控件
数据库表控件是一个用于展示数据库表数据的控件，可以通过在属性栏设置表名、列名、排序字段、条件语句等属性，使数据库表控件获取并显示相应的数据。
拖出一个数据库表控件，选中控件并单击"数据"选项卡；
然后在"表格数据"栏中分别填写数据库表名、返回条数；
在"表格列名"栏新增并填写需要显示的表格列名及对应的数据库表字段名；
在"排序字段"栏可以设置多个排序字段；
在"条件语句"栏的文本框中输入查询条件语句。如下图所示：
我们还可以对表格的样式进行设置，如表头、表体的行高、字体大小和颜色，以及表格是否需要列表框，需要怎样的边框。另外，还可以设置表格数据的显示动效，目前该控件提供了滑动动效。如下图所示。
除了对表格整体设置样式外，还有一个针对于表格单列进行设置的选项，点击右侧属性外观下的列设置，可以在弹窗内设置当前列显示的是进度条还是文字等，还可以设置单列的宽度等设置，设置内容如下：
- 数值展示 配置对应的字段到，在表格中会以迷你柱状图的形式进行展示
效果：
# 告警列表控件
告警列表控件是一个用于显示实时快照中设备的报警信息的控件。
拖出一个告警列表控件，在右侧的属性列中点击数据配置项，在弹窗中绑定实时快照中已存在的自己需要的字段信息，
在右侧的属性列中找到告警设备设置栏，在里面输入表格中信息关联的设备号。如下图所示：
该控件的表头，表体，单行列设置的操作与数据库表控件中的样式设置一样。
告警列表可与地图控件联动使用。勾选界面中的关联地图定位选项后，报警列表将自动生成查看地图列。
例如，若图中温湿度设备已在地图上完成点位绑定，点击操作按钮，即可快速在地图上定位并显示该设备。
# 测点表格控件
测点表格控件是一个用于显示绑定设备实时数据的表格控件。
拖出一个测点表格控件，选中该控件，在右侧属性数据中找到表格数据，点击表格数据后面输入框末尾的图标出现一个弹窗。
在弹窗中先点击自己需要显示的设备，在中间选中遥测点或遥信点，然后点击下面表格中需要的行后面的选择按钮。
最后点击确定按钮。
在表头数据中，输入需要显示表头信息即可，如下图所示：
- 配置好控件信息后，在查看页面中显示的效果如下：
其内容样式设置与数据库表控件设置一样。
# 设备表格控件
设备表格控件是一个可以自定义表格列数，实时显示绑定设备数据的控件。
把设备表格控件拖入画布。选中控件，在属性数据栏中找到表格数据，点击表格数据输入框后面的图标出现弹窗。
点击弹窗右侧添加行的按钮，表头内容会出现更改。可以通过点击编辑文字，将表头点击编辑的单元格中的文字进行更改，如下图所示：
也可以在右侧上栏第一个输入框中输入添加的列的列名，如下图所示：
点击左侧需要使用的设备，再在右侧表格中点击需要填入信息的单元格，在中间表格中点击数据即可把设备表达式插入到点击的单元格中(如果不需要绑定设备号，只需要显示默认文本，可以直接在单元格中输入需要的内容)。
其在查看页面显示效果如下:
# 进度条控件
当需要展示某一事项的完成进度时，我们可以使用进度条控件来达成直观展示效果。
进度条控件的进度数据是以绑定测点的形式获取的，所以此控件支持敢为数据功能。其操作与值文本框控件基本相同。
选中当前进度条控件在右侧属性栏修改其属性参数进行，如下图所示：
# 数字滚动控件
所谓数字滚动控件，其实就是一个有滚动特效的数值显示控件。
同样的，此控件支持敢为数据功能，操作与值文本框控件相同。
另外，数字滚动控件可以在“外观”栏设置边框颜色、背景颜色，以及数字滚动特效的动画时长等，如下图所示。
# 时间控件
时间控件是一个用于显示当前时间的控件，内置多种时间格式可供选择。
选中当前控件单击“时间格式”下拉按钮，在展开的下拉列表中选择一个需要的时间格式即可。
# 跑马灯控件
跑马灯控件是一个可以让文本内容以跑马灯形式呈现的控件，可以认为是一个升级版文本控件。
通过在“外观”栏中设置文字跑马灯效果的速度属性，我们可以控制控件文本内容移动的快慢
# 轮播图控件
轮播图控件，顾名思义，是一个用于对多张图片进行轮播的控件。
选中轮播图控件后，在“外观”选项卡的“图片”栏中单击“新增图片”按钮，然后选择需要的图片，依此操作逐张添加需要进行轮播的图片即可。保存后，轮播图控件将按照图片添加顺序进行轮播。
另外，还可以在“位置”下拉框中修改浮标位置；修改“切换时间”设置项则可以调整图片轮播的速度。
# 边框控件
边框控件内置了多种边框样式，可以为态势页面的美化创作更多可能。
选中边框控件后，在“外观”选项卡的“边框样式”下拉列表中选择合适的边框样式即可。
# 字体图标控件
字体图标控件为用户提供了非常多的字体图标，以满足制作可视化时各种各样的图标需求。
选择字体图标控件后，在“外观”选项卡的“字体图标”栏单击“图标”下拉框，然后选择需要的图标。单击“图标颜色”右侧的颜色选择器按钮可设置图标颜色，如下图所示。
# 开关控件
开关控件是一个用于控制设备开关状态的控件，其支持敢为数据功能。可通过设置报警表达式来实时判断设备当前的开关状态，通过开启、关闭表达式来实现开、关动作的不同设置命令。
在“数据”选项卡的“开关状态”栏中分别设置开启、关闭两种不同状态的设置表达式，如S:11134,1。当用户单击开关控件，使其为开启状态时，执行“开启”设置表达式。
另外，还可以在“敢为数据”栏中，设置报警表达式，当表达式为真时，开关控件自动显示为开启状态，为假则关闭。
# iframe控件
iframe是一个用于重载网页、态势和GIS地图页面的控件。
在"外观"选项卡的"iframe"栏中网页地址输入框输入地址或者态势ID。
重载网页地址，格式为：www.baidu.com;
重载态势，格式为：'view?id=*&type=0&pageGuid=*'，id为态势列表里对应态势页面的"编号"；
重载GIS地图，格式为：/topology-gis/#/viewgd?id=***。
# Div控件
Div控件是一个作为按钮的控件。
- 该控件可以实现iframe网址切换的功能。点击属性数据iframe属性栏中的所属iframe后的选择框内容，选中绑定某个iframe，然后在网页地址设置中输入切换的地址，如下图所示：
作为视频或三维打开的按钮。当div控件文本内容为'打开视频'时，在视频参数中填入已知参数，点击按钮即可打开视频（输入参数如右下图所示）
作为设备表格筛选按钮。当控件文本内容为全部或重置时，获取表格所有数据。选中div控件，在表格属性中选择绑定的设备表格id，点击新增条件，选择要进行筛选的某列的列名，输入等于值即可，如下图所示：
如上图中选中设备名，后面输入框输入11，将会把表格中设备名这一列的值等于11的数据筛选到表格中显示出来。
# svg控件
svg控件是一个用于导入svg图片的控件。
向\ganwei-iotcenter-visual\assets\img\img\2d-svg路径下添加.svg后缀的文件，在svg栏下文件名输入框中填入不包括.svg后缀的文件名字。
# 设备列表控件
设备列表控件是一个显示不同设备不同测点实时数据的列表控件。
拖入一个设备表表控件到画布中。
在右侧属性下的数据中找到设备列表数据，在模板选择中可以根据需求选择不同版本的数据排列方式。
点击查询的设备号，在弹窗中输入需要绑定的一个或多个设备号，以","将不同的设备号分开。
在列数设置中，其值主要是指一行分布多少个模块。
设置设备号测点和其显示样式可以通过点击测点实时值，在其弹出的弹窗中配置。如下图所示：
# 文本渐显控件
文本渐显控件是一个可以设置规定时间内让文字逐个显示的控件。
在文本内容中输入需要显示的文字，在属性外观设置最后找到文本渐显设置，根据需求选择是否循环，循环间隔和渐显时长，设置如下：
# 天气控件
天气控件是一个显示实时天气气温的控件。
在“属性->数据”面板中找到天气api，在里面填入接口地址，图标字段和气温字段绑定的是接口返回数据中指定的字段名，如下所示：
# 显隐下拉框控件
显隐下拉框控件是一个用于控制其他控件显示或隐藏的控件。
请按以下规则新增下拉框选项：
| 输入项 | 说明与示例 |
|---|---|
| 下拉框选项 | 选项的显示名称，如：文本1 |
| 实际值 | 该选项所关联的控件ID，如：rOaVdwTP |
获取相关控件ID流程：
在编辑区域选中您需要查看的控件。
在右侧的属性面板中，切换到 “数据”选项卡。
您可以在该选项卡下找到该控件的ID字段，并进行复制。
# 地图控件
地图控件功能完备，能依据设备配置的经纬度在地图精准打点显示设备位置，还支持自由调整地图位置与大小、通过鼠标滚轮灵活缩放地图。提供高德与谷歌两种地图类型供用户按需选择，并可设置默认显示的经纬度区域和初始缩放层级。设备绑定流程简便，选定产品、勾选设备、输入经纬度后确定即可。保存组态预览时能看到设备图标，点击图标还能查看设备的所有测点信息，为用户设备管理带来高效便捷体验。
- 在画布中拖入一个地图控件
- 修改地图位置与大小 根据实际需求，调整地图在页面中的位置以及显示大小。 可在图片属性中修改设备状态所展示的打点颜色与设备的弹窗颜色。
- 地图类型与参数设置 系统默认提供高德地图与谷歌地图两种选择，用户可根据自身需求自行挑选。
- 经纬度：设定当前地图默认显示的区域中心点经纬度。
- 缩放层级：用于控制地图初始显示的详细程度。
- 设备绑定
- 从产品列表中选择对应的产品。
- 勾选需要在地图上进行打点展示的设备。
- 输入所选设备对应的经纬度信息。
- 点击“确定”按钮完成绑定操作。
说明：用户可自定义在页面上展示的图例名称与图标
- 查看设备打点效果 保存当前组态配置后，点击“预览”按钮，即可在地图上看到已绑定的设备图标（通过滚动鼠标滚轮可调整地图的显示层级）。
- 查看设备测点信息 鼠标点击地图上的设备图标，将弹出窗口显示当前设备的所有测点信息。
# 表单控件
表单控件总览
# 文本框控件
文本框控件是一个供用户填写表单中相关文本信息的控件。
# 下拉框控件
下拉框控件是一个供用户选择表单信息的控件。
我们可以通过“数据”->“数据”->"新增属性"设置下拉框控件的下拉选项，如下图所示。设置完成后，在查看页面可以看到下拉框效果。
# 保存按钮控件
保存按钮控件是一个用于提交本组表单信息的控件。
当正确设置了表单分组后，用户填写表单后单击保存按钮即可将填写的内容保存并提交。
# 还原按钮控件
通过重置按钮，用户可以使表单中的各项内容还原至上一次提交时的状态。（关于表单功能的具体实现，将在【核心功能-表单功能】章节介绍）
# 数据筛选控件
# 日期时间控件
日期时间控件是一个与数据库表格控件绑定，进行表格数据筛选的控件。
拉取日期时间控件到画布中，要实现数据筛选，要在table控件的“属性->数据”面板中找到查询条件，在这项设置里新增设置，选择绑定的字段名和判断条件，绑定拖进来的日期时间控件的id,如下图所示：
# 输入框控件
输入框控件是一个与数据库表格绑定，通过自定义值，对数据库表进行筛选的控件。
控件的使用与日期时间控件相同，都需要将输入框控件的id绑定到数据库表格的查询条件中。在查看态势页面，在输入框中输入内容，点击搜索就可以对表格进行筛选。
在属性外观末尾，有对输入框搜索按钮进行样式设置的区域，如下图所示：
示例：
- 配置表格数据，图中数据为下拉框API数据源，绑定对应的列。
- 配置筛选控件中的输入框控件，绑定对应的数据源与请求字段（当前条件字段需API接口支持该条件）
- 查看未输入查询条件的表格。
- 按条件查询数据。
说明
数据筛选下拉框可绑定数据源，下表为内置的下拉框数据源API可参考其返回格式。
| 序号 | 接口名称 | URL | 请求方式 | 是否为第三方接口 | 适用控件 |
|---|---|---|---|---|---|
| 1 | 下拉框API | /api/ChartDemo/GetSelectOptionModelData | Get | 否 | 数据筛选下拉框 |
# 下拉框控件
下拉框控件是一个与数据库表格绑定，通过选择数据，对数据库表进行筛选的控件。
该控件的使用与日期时间控件相同，都需要将下拉框控件的id绑定到数据库表格的查询条件中。在右侧属性数据中存在下拉框内容配置项，可以自定义下拉框选项及选项传递的值。
数据源绑定方式如图
效果图
说明
- 控件说明规范： 同类控件将进行归类说明，其基础操作逻辑及配置参数保持统一规范。仅针对差异化配置项进行单独说明，以提升文档可读性。
- 图表系统说明： 系统预置多种标准化图表API接口（详见各图表类型章节），每个图表类型章节将详细说明其调用方式、配置参数及典型应用场景，方便开发者快速集成使用。
| 序号 | 接口名称 | URL | 请求方式 | 是否为第三方接口 | 适用图表 |
|---|---|---|---|---|---|
| 1 | 折线图API | /api/ChartDemo/GetLineChartData | Get | 否 | 折线图、曲线图 、柱状图、塔状图、条形图、电量条形图、3D柱状图 |
| 2 | 堆叠图API | /api/ChartDemo/GetstackedChartData | Get | 否 | 堆叠条形图、堆叠柱状、堆叠面积图积 |
| 3 | 轮播百分比饼图API | /api/ChartDemo/GetPercentagePieData | Get | 否 | 玫瑰图、饼图、环形图、轮播百分比饼图、轮播百分比条形图 |
| 4 | 能流图API | /api/ChartDemo/GetSankeyChartData | Get | 否 | 能流图 |
| 5 | 双向柱状图API | /api/ChartDemo/GetBidirectionalBarChartData | Get | 否 | 双向柱状、左右柱状图图 |
| 6 | 雷达图API | /api/ChartDemo/GetBarChartData | Get | 否 | 雷达图 |
| 7 | 饼图API | /api/ChartDemo/GetPieChartData | Get | 否 | 电量型百分比图、仪表盘、百分比饼图 、水球图、旋转环图、极坐标图表 |
| 8 | 散点图API | /api/ChartDemo/GetcatterplotDataData | Get | 否 | 散点图 |
| 9 | 漏斗图API | /api/ChartDemo/GetFunnelplotData | Get | 否 | 漏斗图 |
| 10 | 柱线图API | /api/ChartDemo/GetColumnDiagramModelData | Get | 否 | 柱线图 |
| 11 | 矩形树图API | /api/ChartDemo/GetRectangularTreeDiagramModelData | Get | 否 | 矩形树图 |
| 12 | 行政区地图API | /api/ChartDemo/GetdistrictMapModelData | Get | 否 | 行政区地图 |
- 每个数据源的数据格式可点击测试连接查看接口返回的数据
- 如需要按指定的排序方式进行显示数据需在数据源中进行处理。
# 图表控件
图表控件总览
# 折线&曲线图
一、基础曲线图表概述 本系统支持4种核心曲线类图表配置，包含2种基础线型图表及2种面积填充图表：
| 图表类型 | 特征描述 | 典型场景 |
|---|---|---|
| 折线图 | 直线连接数据点 | 趋势对比、阶段变化分析 |
| 曲线图 | 贝塞尔曲线连接数据点 | 流畅趋势展示、预测分析 |
| 折线面积图 | 折线图+底部填充色 | 占比趋势分析 |
| 曲线面积图 | 曲线图+底部填充色 | 动态占比趋势分析 |
⚠️ 注：前2种图表与后2种图表配置逻辑完全一致，仅视觉呈现方式差异
二、基础配置流程（以折线图为例）
控件初始化
- 在画布区域拖拽放置「折线图控件」
- 默认生成初始坐标系及图例占位符
数据配置
- 选中该控件进入「数据」配置面板
- 点击【新增图例】按钮创建数据序列
- 配置关键参数：
- 图例名称：支持中英文及特殊符号（例：
季度销售额） - 数据表达式：采用行列索引语法（例：
$C1(4,1)表示设备号为4遥信号为1的数据实时值）
- 图例名称：支持中英文及特殊符号（例：
图表绑定数据源数据
数据源
- 作用：选择图表所需的数据来源，系统将从指定的数据源中提取“季度营业额”数据。
- 影响：数据源的选择直接影响图表展示数据的准确性和相关性。
- 操作建议：请确保选择的数据源可靠且与您的需求匹配。
字段路径
- 影响：如果字段路径未设置或设置错误，系统可能无法正确提取数据，导致数据缺失或错误。
- 操作建议：请根据您的数据源结构，填写正确的字段路径，以确保系统能够准确提取所需数据。
刷新时间(s)
- 作用：设置数据更新的频率，单位为秒。在此处，系统每隔60秒会自动更新数据。
- 影响：刷新频率影响数据的实时性和系统性能。较短的刷新时间可以提供更及时的数据，但可能增加系统负担；较长的刷新时间则相反。
- 操作建议：根据您的数据实时性需求和系统性能情况，选择合适的刷新时间。
数据源配置参考，平台内置示例api可直接使用折线图API数据源，字段路径默认为data。URL：/api/ChartDemo/GetLineChartData
效果图
数据源内容如下：
{
"succeeded": true,
"data": {
"name": [//X轴数据
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
"value": [//y轴数据
10,
15,
20,
25,
30,
35,
30,
25,
20,
15,
10,
5
]
},
"code": 200,
"message": "操作成功"
}
若需要给折线图添加滚动条可以加上下列代码
"dataZoom":{
"show": true,
"start": 30,
"end": 70,
"xAxisIndex": [0, 1]
},
图例设置
图例显示：
- 作用：控制图例是否在图表上显示。图例用于解释图表中不同线条或区域所代表的数据系列。
- 操作建议：如果您需要隐藏图例以简化图表，可以关闭此选项。
图例位置：
- 作用：决定图例在图表中的位置。您可以选择将图例放置在图表的上边或左边。
- 操作建议：根据图表布局和个人偏好选择合适的位置。
图例字号：
- 作用：控制图例文字的大小。
- 操作建议：根据图表大小和可读性需求调整字号。
图例字颜色：
- 作用：设置图例文字的颜色。
- 操作建议：选择与图表背景对比度高的颜色以确保图例的可读性。
X轴设置
X轴标题：
- 作用：为X轴设置标题，提供X轴数据的上下文信息。
- 操作建议：根据X轴所代表的数据类型设置合适的标题。
X轴标题颜色：
- 作用：设置X轴标题的颜色。
- 操作建议：选择与图表背景对比度高的颜色以确保标题的可读性。
X轴标题字号：
- 作用：控制X轴标题文字的大小。
- 操作建议：根据图表大小和可读性需求调整字号。
X轴名称：
- 作用：用于设置X轴上各个数据点的名称或标签。
- 操作建议：如果X轴代表具体的时间点、类别等，请设置相应的名称或标签。
X轴名称颜色：
- 作用：设置X轴上数据点名称的颜色。
- 操作建议：选择与图表背景对比度高的颜色以确保名称的可读性。
X轴显示：
- 作用：控制X轴是否在图表上显示。
- 操作建议：如果您需要隐藏X轴以简化图表，可以关闭此选项。
X轴刻度线显示：
- 作用：控制X轴上的刻度线是否显示。刻度线有助于读者理解X轴上的数据间隔和范围。
- 操作建议：根据图表的可读性和美观性需求决定是否显示刻度线。
X轴网格线显示：
- 作用：控制图表中的网格线是否显示。网格线有助于读者更准确地读取图表数据。
- 操作建议：如果您需要更精确地读取数据，可以开启网格线。但过多的网格线可能会使图表显得杂乱，请根据实际需求调整。
Y轴设置
Y轴名称
- 作用：定义Y轴的名称，标识Y轴代表的数据含义。
- 当前状态：名称未具体给出，您可以根据需求自定义。
Y轴名称颜色
- 作用：设置Y轴名称的颜色，影响名称的可见性和美观性。
- 操作建议：选择与图表背景对比度高的颜色以确保名称的可读性。
Y轴名称字号
- 作用：设置Y轴名称的字体大小，影响名称的可读性。
- 操作建议：根据图表大小和可读性需求调整字号。
Y轴名称偏移
- 作用：通过调整偏移量，使Y轴名称更符合图表的整体布局。
- 操作建议：根据图表布局和个人偏好微调偏移量。
Y轴刻度标签
- 作用：设置Y轴上刻度标签的字体大小和颜色。
- 操作建议：根据图表大小和可读性需求调整字号和颜色。
Y轴标题位置
- 作用：通过调整标题位置，使Y轴标题更符合图表的整体布局。
- 操作建议：根据图表布局和个人偏好微调标题位置。
Y轴显示
- 作用：控制Y轴是否显示，包括其上的刻度标签和标题。
- 操作建议：如果您需要隐藏Y轴以简化图表，可以关闭此选项。
Y轴网格线
- 作用：网格线有助于用户更好地对齐和读取图表数据。
- 操作建议：根据图表的可读性和美观性需求调整网格线的显示、颜色和样式。
标题显示设置
标题全显：
- 作用：控制标题是否完全显示。
- 影响：如果设置为“否”，标题可能不会完全展示，可能会被截断或隐藏部分内容。
- 操作建议：如果您希望标题完全显示，请将此选项设置为“是”。
折线配置
折线宽度
- 作用：设置折线的宽度。值越大，折线在图表中显示得越粗；值越小，折线显示得越细。
- 影响：调整折线宽度可以影响图表的视觉效果和可读性。较粗的折线在视觉上更显眼，适合强调数据变化；较细的折线则更适合展示精细的数据变化。
- 操作建议：根据您的数据特点和展示需求，调整折线宽度以达到最佳的视觉效果。例如，如果您希望突出显示数据的变化趋势，可以选择较粗的折线宽度；如果您希望展示精细的数据变化，可以选择较细的折线宽度。
圆点显隐
- 作用：控制折线图中数据点的圆点是否显示。如果开启，数据点将以圆点形式显示在折线上；如果关闭，则不显示圆点。
- 影响：显示圆点可以帮助用户更清晰地看到每个数据点的位置，便于对比和分析数据。不显示圆点则可以使图表看起来更简洁。
- 操作建议：根据您的数据展示需求，选择是否显示圆点。如果您希望强调每个数据点的位置，可以开启圆点显隐；如果您希望图表看起来更简洁，可以关闭圆点显隐。
# 饼图
一、饼图类型概述 本系统支持多种饼图类型，包括常规饼图、环形图、电量百分比图、玫瑰图、百分比饼图、旋转环图和轮播百分比饼图，以满足您多样化的数据可视化需求。
二、通用配置
用户可直接修改图表配置内容根据需求自定义图例及样式。用户可参考echarts官网 (opens new window)内容进行优化
以下是玫瑰饼图样式代码（其它饼图图标配置代码均类似），下面对每个关键配置项的作用进行了说明：
{
"echarts": {
"option": {
// 提示框配置
"tooltip": {
"trigger": "item", // 触发类型：数据项图形触发
"formatter": "_NuFrRa_r=>`${r.name}: ${r.value.value} ${r.percent}%`" // 自定义提示框格式（使用模板字符串）
},
// 图例配置
"legend": {
"orient": "vertical", // 图例垂直排列
"top": "middle", // 图例垂直居中
"right": "5%", // 距离容器右侧5%
"data": [ // 图例数据项（需与series.data中的name对应）
"one", "two", "three", "four", "five", "six", "seven", "eight"
],
"textStyle": { // 图例文本样式
"fontSize": 12, // 字体大小
"color": "#CCCED1" // 字体颜色
}
},
// 颜色配置（按数据顺序对应）
"color": [
"#008AF5", "#C16FFF", "#FFB096", "#70F3B9",
"#28E597", "#FFC400", "#FFF600", "#00EFF1"
],
// 系列配置（核心图表部分）
"series": [
{
"name": "", // 系列名称（留空）
"type": "pie", // 图表类型：饼图
"radius": ["10%", "70%"], // 饼图半径范围（内径10%，外径70%）
"roseType": "area", // 南丁格尔玫瑰图模式（按面积显示）
"center": ["40%", "50%"], // 图表中心位置（横向40%，纵向50%）
"hoverAnimation": false, // 禁用悬停动画
// 标签配置
"label": {
"show": false, // 默认不显示标签
"position": "center", // 标签位置（实际未生效，因show为false）
"formatter": "_NuFrRa_r=>`${r.name}\\n${r.value.value} ${r.percent}%`", // 标签格式（换行显示）
"fontSize": "20", // 字体大小
"color": "#bbb" // 字体颜色
},
// 高亮状态配置
"emphasis": {
"label": {
"show": true, // 高亮时显示标签
"fontSize": "20", // 高亮字体大小
"fontWeight": "bold", // 高亮字体加粗
"formatter": "_NuFrRa_r=>`${r.name}\\n${r.value.value}`" // 高亮格式（仅显示名称和数值）
}
},
// 图形样式配置
"itemStyle": {
"boderWidth": 0, // 边框宽度（注意拼写错误，应为borderWidth）
"boderColor": "#fff", // 边框颜色（注意拼写错误，应为borderColor）
"borderRadius": 0 // 边框圆角
},
// 标签引导线配置
"labelLine": {
"show": true // 显示标签引导线
},
// 图表数据（按图例顺序对应）
"data": [
{"value": 10, "name": "five"},
{"value": 5, "name": "six"},
{"value": 15, "name": "seven"},
{"value": 25, "name": "eight"},
{"value": 38, "name": "four"},
{"value": 35, "name": "three"},
{"value": 30, "name": "two"},
{"value": 40, "name": "one"}
]
}
]
}
}
}
注释说明
tooltip部分：show: false：注释说明了不显示提示框的配置。
legend部分：- 每个属性都添加了注释，解释了其作用，如显示图例、设置布局方向、位置以及文本样式等。
series部分：- 对整个饼图系列的配置进行了注释，包括系列类型、半径范围、起始角度等。
- 对
data数组中的每个数据项的属性（value、name、itemStyle）进行了详细注释，解释了其含义。 - 对
labelLine和label的配置也添加了注释，说明了不显示标签引导线和标签的设置。
通过这些注释，代码的结构和配置项的作用更加清晰易懂。
饼图图例配置：
⚠️ 注：玫瑰图、环状图、轮播百分比饼图等多数据饼图无法绑定设备表达式，只能通过图例或数据源进行绑定。 数据源配置参考，平台内置示例api可直接使用轮播百分比饼图API数据源，字段路径默认为data。URL：/api/ChartDemo/GetPercentagePieData
效果图
数据源内容如下：
{
"succeeded": true,
"data": [
{
"name": "新能源综合应用率",
"value": 37
},
{
"name": "空间资源利用率",
"value": 31
},
{
"name": "智慧运营效能",
"value": 21
},
{
"name": "安全保障指数",
"value": 9.5
},
{
"name": "基础环境达标率",
"value": 1.5
}
],
"code": 200,
"message": "操作成功"
}
用户还可以通过下图中内容修改饼图外观（其它存在下列编辑按钮的饼图均适用） ⚠️ 注：也可在图表配置代码中修改其外观样式。
三、外观栏配置
在属性数据栏中，您可以对饼图进行更精细化的配置，以控制其外观和交互行为：
| 配置项 | 描述 |
|---|---|
| 环半径 | 调整环形图和旋转环图的内径，控制环形厚度 |
| 颜色样式 | 设置设置饼图颜色 |
四、数据配置
数据配置：
- 数据绑定：
- 点击「表达式」的放大镜按钮。
- 选择或输入设备表达式，例如：
$C1(3,2)。 - 表达式语法与基础控件中的值文本框控件完全一致。
⚠️ 注：仅普通饼图可直接选择测点，其它饼图需要添加图例进行绑定设备测点数据
- 实时更新：
- 绑定表达式后，饼图将自动获取设备实时数据。
- 数据源结合「刷新时间」配置，可控制数据更新频率。 ⚠️ 注：如需通过数据源进行绑定数据。数据格式参考[图标配置]代码中的echarts-series下的data集合
示例配置：
数据源: 实时设备数据
表达式: $C1(设备号,遥测号)
五、使用场景建议
| 饼图类型 | 适用场景 |
|---|---|
| 常规饼图 | 展示静态数据占比，如市场占有率分析、预算分配等 |
| 环形图 | 强调内部数据，或需要与其他图表进行组合展示 |
| 玫瑰图 | 展示多维度数据占比，通过半径差异强化数据对比 |
| 百分比饼图 | 实时监控单个数据占比，如设备运行状态监控、实时进度展示等 |
| 旋转环图 | 需要吸引视觉注意力的单个数据占比场景，如数字看板、动态数据展示等 |
| 轮播百分比饼图 | 需要同时监控多个实时数据占比的场景，如多设备状态监控、多指标实时进度展示等 |
# 柱状图
一、图表类型概述 柱状图作为数据可视化领域的基础图表形式，以其直观易懂的特点广泛应用于各类数据展示场景。本系统支持多种柱状图类型，以满足您多样化的数据展示需求：
| 图表类型 | 描述 |
|---|---|
| 常规柱状图 | 标准的垂直柱状图，通过不同高度的柱子直观展示分类数据之间的对比情况，适用于简单、清晰的数据对比场景。 |
| 堆叠柱状图 | 将不同类别的柱形进行堆叠展示，可以清晰地看出多个系列数据在整体中的占比关系，方便分析各部分对整体的贡献。 |
| 3D柱状图 | 具有立体效果的柱状图，通过三维呈现增强了视觉层次感，使图表更具吸引力，适合在需要突出视觉效果的场景下使用。 |
| 双向柱状图 | 柱形向正负两个方向延伸，适用于展示具有对立属性或相反意义的数据对比，如收入与支出、增长与下降等。 |
| 条形图 | 水平方向的柱状图，当类别名称较长或需要横向对比数据时，条形图能提供更好的可读性，避免名称重叠或显示不全。 |
| 堆叠条形图 | 将不同类别的条形进行堆叠展示，适用于横向展示多个系列数据的占比关系，与堆叠柱状图类似，但方向不同。 |
| 电量条形图 | 柱形呈现梯形渐变效果，这种设计可以强调数据的变化趋势，使观察者更容易注意到数据的增减情况。 |
| 轮播百分比条形图 | 结合轮播效果和百分比显示的条形图，通过柱形的梯形渐变和动态轮播，更直观地展示数据的变化趋势和占比情况。 |
| 塔状图 | 柱形呈现梯形渐变效果，类似电量条形图，但形状更接近塔状，适用于强调数据从低到高或从高到低的变化趋势。 |
二、初始化控件
新增控件
- 从左侧控件栏拖拽目标柱状图类型至画布
图中展示的是图表样式配置界面，其中包含边距和圆角等样式设置选项，以下从边距、圆角等方面为你介绍柱状图样式相关内容：
边距设置
- 上边距、下边距、左边距、右边距：这些参数用于调整柱状图在图表容器中的位置和布局。通过设置这些边距，可以控制柱状图与容器边界之间的距离，确保图表内容不会过于拥挤或贴近边缘，从而提升视觉效果和可读性。例如，增加上边距可以使图表标题与图表主体之间有更明显的分隔；调整左右边距可以避免柱状图的柱子过于贴近容器的左右边界。
圆角设置
- 圆角：该选项用于设置柱状图中柱子的边角样式。通过调整圆角的数值，可以使柱子的边角从直角变为圆角，增加图表的柔和感和美观度。较小的圆角数值会使柱子边角较为尖锐，呈现出较为硬朗的风格；较大的圆角数值则会使柱子边角更加圆润，给人一种柔和、友好的视觉感受。
通过对这些样式参数的合理设置，可以定制出符合特定需求和审美标准的柱状图，提升数据可视化的效果和质量。
图例设置
| 配置项 | 描述 |
|---|---|
| 图例名称 | 输入框①：输入数据系列名称（如："销售额"、"温度"） |
| 数据绑定 | 输入框②：绑定设备表达式，支持单值或多值绑定 |
表达式绑定规范：
- 单值绑定：
$C1(设备ID, 遥测号)示例：$C1(1,1)表示绑定ID为1的设备，遥测号为1的测点 - 多值绑定：
;分隔多个表达式 示例：$C1(1,1);$C1(1,2)表示同时绑定两个设备通道数据
快捷绑定方式：
- 点击表达式框右侧「放大镜」按钮
- 在设备树形目录中选择目标设备
- 在遥测列表中选择需要绑定的遥测数据
数据源绑定
- 单个柱状图（柱状图、塔状图、条形图、电量条形图、3D柱状图）可通用折线图API数据源。URL：/api/ChartDemo/GetLineChartData
效果图
- 堆叠图（堆叠条形图、堆叠柱状图、堆叠面积图）可通用堆叠图API数据源。URL：/api/ChartDemo/GetstackedChartData
效果图
- 双向柱状图可使用双向柱状图API数据源。URL：/api/ChartDemo/GetBidirectionalBarChartData
效果图
三、样式配置 在「样式配置」模块进行精细化外观调整：
| 配置项 | 描述 |
|---|---|
| 图例显示 | 切换图例区域的显示/隐藏状态 |
| 文字位置 | 设置图例文字相对于图标的方位（左/右/上/下） |
| 字体样式 | 配置图例文字的字体、字号、粗细、颜色 |
| 图标样式 | 调整图例图标的形状（方形/圆形）、大小、边框样式 |
柱状图视觉映射组件配置（颜色映射）。若当前柱状图需要排序显示则需要在数据源中处理，排序后再返回对应数据即可。 配置代码如下：
"visualMap": {
"orient": "horizontal", // 视觉映射组件水平排列
"left": "center", // 组件左侧位置居中
"min": 20, // 最小值
"max": 30, // 最大值
"text": ["High Score", "Low Score"], // 文本标签（高值到低值）
"dimension": 1, // 使用数据的第一维度（索引0）
"inRange": {
"color": ["#65B581", "#FFCE34", "#FD665F"] // 颜色映射范围（绿→黄→红）
}
},
配置图
效果图
四、其他关键配置
- 视觉增强
| 配置项 | 描述 |
|---|---|
| 柱子背景 | 设置柱形背景色（支持纯色/渐变/图片填充） |
| 柱宽调节 | 控制柱形宽度 |
| 标题是否显示 | 控制主标题的完整显示/智能截断 |
# 雷达图
一、雷达图概述 雷达图作为一种多维数据可视化工具，能够直观展现多个变量在二维平面上的相对关系。本系统提供的雷达图控件支持自定义维度配置，适用于能力评估、性能对比、综合评价等场景，帮助用户快速洞察数据特征。
二、基础操作流程
- 控件部署
- 从左侧控件栏选择「雷达图」控件
- 拖拽至画布指定位置
- 通过四周控制点调整图表尺寸
选中控件后点击图表配置，在弹出的页面中为控件样式代码，用户可根据实际需求进行调整
以下是添加了详细注释的代码，对每个关键配置项的作用进行了解释：
{
"echarts": {
"option": {
// 提示框配置（当前为空对象，使用默认配置）
"tooltip": {},
// 图例配置
"legend": {
"data": [ // 图例数据数组，对应系列名称
"预算分配", // 第一个图例项名称，对应系列中的"预算分配"数据
"实际开销" // 第二个图例项名称，对应系列中的"实际开销"数据
],
"textStyle": { // 图例文本样式配置
"fontSize": 12, // 图例文本字体大小
"color": "#CCCED1" // 图例文本颜色
}
},
// 雷达图配置
"radar": {
"name": { // 雷达图指示器名称样式配置
"textStyle": { // 指示器名称文本样式
"color": "#CCCED1", // 指示器名称颜色
"borderRadius": 3, // 指示器名称背景圆角（可能需配合其他属性使用）
"padding": [3, 5] // 指示器名称内边距，分别表示上下和左右的内边距
}
},
"indicator": [ // 雷达图指示器（轴）配置数组
{
"name": "类型一", // 指示器名称
"max": 100, // 指示器最大值，数据值将基于此值进行映射
"axisLabel": { // 轴标签配置
"show": true // 显示轴标签
}
},
// 后续指示器配置与第一个类似，省略了axisLabel（默认显示）
{ "name": "类型二", "max": 100 },
{ "name": "类型三", "max": 100 },
{ "name": "类型四", "max": 100 },
{ "name": "类型五", "max": 100 }
],
"splitArea": { // 雷达图分割区域配置
"show": false // 不显示分割区域（背景色块）
},
"splitLine": { // 雷达图分割线配置
"lineStyle": { // 分割线样式
"color": "rgba(129, 136, 146, 0.5)" // 分割线颜色（半透明灰色）
}
},
"axisLine": { // 雷达图轴线配置
"lineStyle": { // 轴线样式
"color": "rgba(129, 136, 146, 0.2)" // 轴线颜色（更浅的半透明灰色）
}
},
"triggerEvent": true // 开启雷达图区域事件触发（可用于交互事件）
},
// 颜色配置
"color": [ // 系列颜色数组，按顺序对应series中的数据系列
"#60EEF9", // 第一个系列（预算分配）的颜色
"#FFF600" // 第二个系列（实际开销）的颜色
],
// 系列配置
"series": [
{
"type": "radar", // 系列类型为雷达图
"areaStyle": { // 雷达图区域填充样式配置
"normal": { // 正常状态下的样式
"opacity": 0.2, // 区域填充透明度（0-1）
"width": 3 // 区域填充的宽度（可能指边框宽度，但areaStyle通常控制填充）
}
},
"data": [ // 系列数据数组
{
"value": [60, 50, 55, 70, 68, 45], // 数据值数组，对应indicator中的各个类型
"name": "预算分配" // 数据名称，对应图例中的"预算分配"
},
{
"value": [65, 60, 45, 55, 50, 70], // 另一个数据集的值
"name": "实际开销" // 数据名称，对应图例中的"实际开销"
}
],
"itemStyle": { // 图形样式配置
"borderWidth": 0, // 图形边框宽度（0表示无边框）
"borderColor": "#fff", // 图形边框颜色（此处可能不生效，因borderWidth为0）
"borderRadius": 5 // 图形边框圆角（对多边形顶点进行圆角处理）
}
}
]
}
}
}
关键配置项说明
radar.indicator：- 定义了雷达图的各个轴（维度），每个对象代表一个轴。
name：轴名称，显示在雷达图外围。max：轴的最大值，数据值将基于此值进行映射和显示。
radar.splitLine和radar.axisLine：splitLine：雷达图内部的分割线，连接各个轴的点，形成网格。axisLine：雷达图的外围轴线。- 通过
lineStyle可以自定义这些线的颜色、宽度等样式。
series.areaStyle：- 控制雷达图区域的填充样式。
opacity：填充透明度，值越小越透明。- 注意：在雷达图中，
areaStyle通常用于控制填充区域的样式，而width属性可能不是标准属性（可能是特定版本或扩展的属性），其具体作用可能因ECharts版本而异。
series.itemStyle：- 控制雷达图数据系列的样式。
borderWidth：数据系列边框的宽度。borderColor：数据系列边框的颜色。borderRadius：数据系列边框的圆角半径，对多边形顶点进行圆角处理。
三、核心配置项详解
- 用户可自定义雷达图标题
四、数据绑定
图例数据绑配置
- 点击「图例」配置栏展开面板
- 点击「新增图例」按钮
- 配置参数：
- 图例名称：输入数据系列标识（如："玩家A"、"标准值"）
- 值表达式：绑定数据源，支持：
- 手动输入：
$C1(设备ID,遥信号)格式 - 选择器绑定：点击[]通过设备树快速选取目标通道
- 手动输入：
数据源绑定
雷达图可使用雷达图API数据源进行绑定。URL：/api/ChartDemo/GetBarChartData 
效果图 
注意
格式要求
- 数量对应：每个图例的值表达式数量必须与标题（维度轴）数量一致
- 表达式结构：$C1(设备ID,遥测/遥信号)
- 设备ID：需替换为实际设备标识符（如：11124）
- 遥测/遥信号：对应设备数据遥测/遥信号（1-N）
- 多值分隔：使用分号;分隔多个表达式
# 仪表盘
一、图表类型概述 仪表盘控件通过模拟传统机械仪表的显示方式，将单一关键指标以直观的量表形式呈现。本系统提供的仪表盘控件支持自定义刻度范围、阈值警示和样式配置，特别适用于展示设备运行状态、关键绩效指标（KPI）等需要实时监控的核心数据。
二、基础操作流程
控件部署
- 从左侧控件栏选择「仪表盘」控件
- 拖拽至画布指定位置
- 通过四周控制点调整仪表盘尺寸（建议保持1:1比例以确保显示效果）
数据绑定 选中图表后，在右侧属性面板进入「数据」配置模块,点击表达式选择设备进行绑定
三、核心配置项详解
选中控件后点击图表配置，在弹出的页面中为控件样式代码，用户可根据实际需求进行调整
以下是添加了详细注释的 ECharts 配置代码，帮助理解各配置项的作用：
{
"echarts": {
"option": {
// 提示框配置
"tooltip": {
"formatter": "{b} <br/>{c} %" // 格式化提示框内容，显示名称和百分比
},
// 仪表盘系列配置（包含两个叠加的仪表盘）
"series": [
{
// 主仪表盘配置（内层）
"type": "gauge",
"center": ["50%", "60%"], // 仪表盘中心位置（水平50%，垂直60%）
"radius": "80%", // 仪表盘半径（容器宽度的80%）
"startAngle": 180, // 起始角度（180度表示从正上方开始）
"endAngle": 0, // 结束角度（0度表示指向右侧）
// 轴线配置（仪表盘背景条）
"axisLine": {
"show": true,
"lineStyle": {
"color": [
[
1, // 颜色分段比例（1表示100%长度）
{
"type": "linear", // 线性渐变
"x": 0, "y": 0, "x2": 1, "y2": 0, // 从左到右渐变
"colorStops": [
{"offset": 0, "color": "#D61C1C"}, // 0%位置红色
{"offset": 0.5, "color": "#F5CA16"}, // 50%位置黄色
{"offset": 1, "color": "#1FCC65"} // 100%位置绿色
],
"globalCoord": false // 使用局部坐标系
}
]
],
"width": 30 // 轴线宽度
}
},
// 刻度线配置
"splitLine": {
"length": 30, // 刻度线长度
"lineStyle": {"width": 1} // 刻度线宽度
},
// 刻度标记配置（隐藏）
"axisTick": {"length": 0},
// 指针配置
"pointer": {
"length": "50%" // 指针长度（相对于半径的百分比）
},
// 中心数值显示配置
"detail": {
"formatter": "{value}%", // 显示格式（带%符号）
"color": "#FFC600", // 字体颜色
"fontSize": 20, // 字体大小
"offsetCenter": [0, "40%"] // 垂直偏移量（向下偏移40%）
},
// 标题配置
"title": {
"textStyle": {
"fontSize": 14,
"color": "#CCCED1" // 标题颜色
}
},
// 数据配置
"data": [
{"value": 65, "name": "完成率"} // 显示65%的完成率
],
// 轴标签配置
"axisLabel": {
"fontSize": 16, // 字体大小
"color": [ // 使用渐变色（与轴线颜色同步）
[
1,
{
"type": "linear",
"x": 0, "y": 0, "x2": 1, "y2": 0,
"colorStops": [
{"offset": 0, "color": "#D61C1C"},
{"offset": 0.5, "color": "#F5CA16"},
{"offset": 1, "color": "#1FCC65"}
],
"globalCoord": false
}
]
],
"distance": 5 // 标签与轴线的距离
}
},
{
// 辅助仪表盘配置（外层背景环）
"type": "gauge",
"center": ["50%", "60%"], // 与主仪表盘同中心
"radius": "90%", // 稍大的半径（作为背景环）
"startAngle": 180,
"endAngle": 0,
// 轴线配置（细线背景）
"axisLine": {
"show": true,
"lineStyle": {
"color": [
[
1,
{
"type": "linear",
"x": 0, "y": 0, "x2": 1, "y2": 0,
"colorStops": [
{"offset": 0, "color": "#D61C1C"},
{"offset": 0.5, "color": "#F5CA16"},
{"offset": 1, "color": "#1FCC65"}
],
"globalCoord": false
}
]
],
"width": 10 // 更细的宽度（10px）
}
},
// 隐藏其他元素（仅显示背景环）
"splitLine": {"show": false},
"axisTick": {"show": false},
"axisLabel": {"show": false},
"pointer": {"show": false},
"detail": {"show": false}
}
]
}
}
}
关键实现说明：
- 双层仪表盘：通过叠加两个
gauge系列实现，外层作为背景环（隐藏刻度/指针），内层显示实际数据 - 渐变效果：轴线和标签都使用三色渐变（红→黄→绿），通过
linear渐变配置实现 - 半圆布局：通过
startAngle: 180和endAngle: 0创建半圆形仪表盘 - 指针定位：
offsetCenter控制中心数值的垂直偏移，避免与指针重叠 - 颜色同步：标签颜色与轴线使用相同的渐变配置，保持视觉一致性
该配置最终会显示一个带有红黄绿渐变效果的半圆形仪表盘，中心显示65%的完成率，外层有细线背景环增强层次感。
表达式数据绑配置 配置参数：
- 值表达式：绑定数据源，支持：
- 手动输入：
$C1(设备ID,遥信号)格式 - 选择器绑定：点击[放大镜]通过设备树快速选取目标通道 数据源绑定 仪表盘可使用饼图API数据源进行绑定所使用的数据格式相同。URL：/api/ChartDemo/GetBarChartData
- 手动输入：
效果图 
# 散点图
一、图表类型概述 散点图通过二维坐标系展示数据点的分布规律，适用于揭示变量间的相关性及离群值检测。本系统提供两种专业散点图类型：
| 图表类型 | 核心特征 | 典型场景 |
|---|---|---|
| 基础散点图 | 标准二维点阵分布，支持自定义点样式 | 变量相关性分析、数据分布探索 |
| 权重散点图 | 点的面积/颜色映射数据权重，支持三维信息可视化 | 人口分布热力、设备负载分布分析 |
二、基础操作流程
控件部署
- 从左侧控件栏选择「散点图」类型（基础/权重）
- 拖拽至画布指定位置
- 通过四周控制点调整图表尺寸
数据绑定 选中图表后，在右侧属性面板进入「数据」配置模块，操作逻辑与折线图控件高度兼容，主要差异体现在数据表达式格式规范。
三、核心配置项详解 选中控件后点击图表配置，在弹出的页面中为控件样式代码，用户可根据实际需求进行调整
以下是添加了详细注释的代码，对每个关键配置项的作用进行了解释：
{
"echarts": {
"option": {
// 网格布局配置
"grid": {
"top": "10%", // 网格上边距，距离容器顶部10%
"bottom": "20%", // 网格下边距，距离容器底部20%
"containLabel": true, // 网格是否包含坐标轴标签，设为true可以防止标签溢出网格区域
"right": "10%", // 网格右边距，距离容器右侧10%
"left": "10%" // 网格左边距，距离容器左侧10%
},
// 提示框配置
"tooltip": {
"trigger": "item" // 提示框触发类型，'item'表示数据项图形触发，适用于散点图等
},
// 图例配置
"legend": {
"data": [ // 图例数据数组，对应系列名称
"1月销售额", // 第一个图例项名称，对应系列中的"1月销售额"数据
"2月销售额", // 第二个图例项名称，对应系列中的"2月销售额"数据
"3月销售额" // 第三个图例项名称，对应系列中的"3月销售额"数据
],
"textStyle": { // 图例文本样式配置
"fontSize": 12, // 图例文本字体大小
"color": "#CCCED1" // 图例文本颜色
}
},
// X轴配置
"xAxis": {
"axisTick": { // X轴刻度配置
"show": false // 不显示X轴刻度
},
"splitLine": { // X轴分割线配置
"show": false // 不显示X轴分割线
},
"axisLabel": { // X轴标签配置
"fontSize": 12, // X轴标签字体大小
"color": "#CCCED1" // X轴标签颜色
},
"axisLine": { // X轴轴线配置
"lineStyle": { // X轴轴线样式
"color": "#FFFFFF", // X轴轴线颜色
"width": 0.5 // X轴轴线宽度
}
},
"nameTextStyle": { // X轴名称文本样式配置
"color": "#ffffff" // X轴名称文本颜色
}
},
// Y轴配置
"yAxis": {
"show": true, // 显示Y轴
"axisLine": { // Y轴轴线配置
"show": false // 不显示Y轴轴线
},
"axisTick": { // Y轴刻度配置
"show": false // 不显示Y轴刻度
},
"splitLine": { // Y轴分割线配置
"lineStyle": { // Y轴分割线样式
"type": "dashed", // 分割线类型为虚线
"color": "rgba(255, 255, 255, 0.2)", // 分割线颜色（半透明白色）
"width": 0.5 // 分割线宽度
}
},
"axisLabel": { // Y轴标签配置
"fontSize": 12, // Y轴标签字体大小
"color": "#CCCED1" // Y轴标签颜色
},
"scale": true, // Y轴是否从0开始，设为true表示不强制从0开始，根据数据自适应
"nameTextStyle": { // Y轴名称文本样式配置
"color": "#ffffff" // Y轴名称文本颜色
}
},
// 颜色配置
"color": [ // 系列颜色数组，按顺序对应series中的数据系列
"#008AF5", // 第一个系列（1月销售额）的颜色
"#FFF600" // 第二个系列（2月销售额）的颜色，第三个系列将使用颜色数组中的下一个颜色（如果提供）或默认颜色
],
// 系列配置
"series": [
{
"name": "1月销售额", // 系列名称，对应图例中的"1月销售额"
"type": "scatter", // 系列类型为散点图
"data": [], // 系列数据数组，当前为空，需要填充具体数据
"symbolSize": "function (data) {return data[2];}" // 散点大小配置，使用函数动态计算散点大小，data[2]表示数据项的第三个值决定散点大小
},
{
"name": "2月销售额", // 系列名称，对应图例中的"2月销售额"
"type": "scatter", // 系列类型为散点图
"data": [], // 系列数据数组，当前为空，需要填充具体数据
"symbolSize": "function (data) {return data[2];}" // 散点大小配置，与第一个系列相同
},
{
"name": "3月销售额", // 系列名称，对应图例中的"3月销售额"
"type": "scatter", // 系列类型为散点图
"data": [], // 系列数据数组，当前为空，需要填充具体数据
"symbolSize": "function (data) {return data[2];}" // 散点大小配置，与前两个系列相同
}
]
}
}
}
关键配置项说明
grid：- 定义了图表在容器中的布局，通过设置上下左右边距，可以控制图表主体与容器边界的距离。
containLabel: true确保坐标轴标签不会溢出网格区域。
tooltip：trigger: 'item'表示提示框由数据项触发，适用于散点图等需要展示单个数据点信息的图表。
legend：- 定义了图例的数据项和文本样式，图例用于说明不同颜色散点所代表的数据系列。
xAxis和yAxis：- 分别配置了X轴和Y轴的样式，包括刻度、分割线、标签和轴线等。
- 通过调整这些配置项，可以控制坐标轴的显示效果和风格。
color：- 定义了数据系列的颜色数组，按顺序对应
series中的数据系列。
- 定义了数据系列的颜色数组，按顺序对应
series：- 定义了图表的数据系列，每个系列对应一个散点图。
symbolSize使用函数动态计算散点大小，可以根据数据项的值来调整散点的大小，增加图表的表现力。
表达式数据绑配置
在属性面板的数据选项卡下，您可以直接通过图例配置快速添加漏斗图数据：
- 新增图例项：在第一个图例区域，点击“新增图例”按钮，添加与漏斗图阶段相对应的图例项。每个图例项代表漏斗图中的一个数据项。
- 配置图例名称与数据：
- 图例名称：在新增的图例项中，第一个输入框内填写图例名称，该名称将显示在图例中。
- 绑定数据表达式：在图例名称输入框后的输入框中，您可以绑定测点表达式，以获取实时数据。
数据源绑定 散点图可使用散点图API数据源进行绑定所使用的数据格式相同。URL：/api/ChartDemo/GetcatterplotDataData
效果图
# 水球图
一、控件概述 水球图（Liquid Fill Gauge）是一种通过动态液面高度和颜色渐变直观展示单一指标完成度的可视化组件，适用于展示任务进度、资源利用率、市场占有率等场景。支持圆形/半圆形两种基础形态，可通过波形动画增强数据动态感知。
- 背景色：您可以设置水球图背后的背景颜色，这是一种带有透明度的蓝色，让背景不会显得过于突兀。
- 边框颜色：您可以设置水球图边缘的边框颜色，是一种较淡的蓝色边框，与背景色相协调。
- 水流颜色：您可以设置水球图中“水流”的颜色，例如渐变或分层效果，使水球图更加生动。
- 字体颜色：您可以设置水球图上文字的颜色，确保文字在背景色上清晰可见。
- 字体大小：您可以设置水球图上文字的大小，使文字信息更加突出或更融入背景。
- 最大值：您可以设置水球图所表示数据的最大值范围，图中设置为100，这意味着水球图将用于展示0到100之间的数据，水流的高度或填充比例将根据实际数据值在这个范围内进行动态展示。
二、外观样式配置 在属性面板的 「图标配置」 配置区域，可进行以下专业设置：
以下是添加了详细注释的代码，对每个关键配置项的作用进行了解释：
{
"echarts": {
"option": {
"series": [
// 水球图主体配置（核心可视化组件）
{
"type": "liquidFill",
"radius": "70%", // 水球半径（容器70%宽度）
"center": ["50%", "50%"], // 居中定位
"color": [ // 液面渐变配色方案
{
"type": "linear",
"x": 0, "y": 0, // 渐变起始点（左上角）
"x2": 0, "y2": 1, // 渐变结束点（左下角）
"colorStops": [ // 颜色断点配置
{"offset": 0, "color": "#33427fb2"}, // 顶部颜色（带透明度）
{"offset": 1, "color": "#37D3FF"} // 底部颜色
]
}
],
"data": [0.5, 0.5], // 数据值（双数据实现波浪动画效果）
"backgroundStyle": { // 背景容器样式
"borderWidth": 1,
"color": "rgba(51, 66, 127, 0.7)" // 半透明背景色
},
"label": { // 数值标签配置
"normal": {
"formatter": "50%", // 显示格式（固定显示50%）
"textStyle": {
"fontSize": 24, // 字号24px
"color": "#fff" // 白色字体
}
}
},
"outline": { // 轮廓线配置
"show": true,
"itemStyle": {
"borderWidth": 0 // 隐藏实际边框线
},
"borderDistance": 0 // 边框与液面间距
}
},
// 装饰性饼图层1（底层环形）
{
"type": "pie",
"zlevel": 1, // 图层级别（底层）
"silent": true, // 禁用交互
"center": ["50%", "50%"],
"radius": ["75%", "74%"], // 环形宽度1%（外75%内74%）
"hoverAnimation": false, // 禁用悬停动画
"color": "rgba(88,142,197,0.5)", // 半透明蓝色
"label": {"normal": {"show": false}}, // 隐藏标签
"labelLine": {"normal": {"show": false}},
"data": [0.5] // 单数据填充半环
},
// 装饰性饼图层2（刻度环）
{
"type": "pie",
"zlevel": 2, // 中层图层
"silent": true,
"center": ["50%", "50%"],
"radius": ["83%", "80%"], // 环形宽度3%（外83%内80%）
"startAngle": 50, // 起始旋转角度
"data": [ // 交替颜色数据实现虚线效果
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}}, // 透明段
// 重复4次创建8段周期性虚线
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}},
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}},
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}}
]
},
// 装饰性饼图层3（外圈高亮环）
{
"type": "pie",
"zlevel": 3, // 顶层图层
"silent": true,
"center": ["50%", "50%"],
"radius": ["78%", "79%"], // 环形宽度1%（外79%内78%）
"data": [ // 相同颜色交替数据
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}},
// 重复4次创建8段结构
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}},
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}},
{"value":25, "itemStyle":{"color":"rgba(88,142,197,0.5)"}},
{"value":20, "itemStyle":{"color":"rgba(0,0,0,0)"}}
]
}
]
}
}
}
三、数据绑定规范 在 「数据」 配置区域完成指标驱动，需遵循以下标准：
- 数据源绑定 散点图可使用饼图API数据源进行绑定所使用的数据格式相同。URL：/api/ChartDemo/GetPieChartData
效果图
四、应用场景建议
- 运营监控：实时展示服务器负载、订单完成率
- 销售看板：季度目标达成度可视化
- 能源管理：设备利用率动态追踪
- 风险预警：库存水位安全阈值监控
# 飞线地图
飞线配置格式：
[
{
"from": "118.8062, 31.9208",
"to": "104.88659, 11.545469"
}
]
其中from和to对应的字段均为经纬度，如下图所示：
# 能流图图表
能流图是一种直观展示能量流动方向和大小的图表形式，通过节点和连接线清晰地呈现能量从源头到终端的传递路径。您可以通过以下步骤配置并使用能流图：
一、外观样式配置
您可以在属性面板的外观选项卡下，对能流图的颜色进行个性化设置，以匹配您的图表主题或展示需求：
- 颜色设置： 提供丰富的颜色配置选项，您可以根据需要调整节点颜色、连接线颜色、背景色等，打造风格统一的能流图。
二、数据绑定
能流图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获取并展示数据。
数据源格式要求
能流图支持JSON格式的数据源，数据需包含 节点（nodes） 和 连接线（links） 两部分信息：
- nodes（节点）: 定义能流图中的各个节点，每个节点需包含唯一标识名称。
- links（连接线）: 定义节点之间的能量流动关系，需包含：
- source: 能量流出节点名称。
- target: 能量流入节点名称。
- value: 能量流动的数值，用于表示流动的大小。
数据源绑定 仪表盘可使用饼图API数据源进行绑定所使用的数据格式相同。URL：/api/ChartDemo/GetPieChartData
效果图 
数据源配置示例
{
"data": {
"nodes": [
{ "name": "文娱" },
{ "name": "工业" },
{ "name": "水" },
{ "name": "风" },
{ "name": "太阳" }
],
"links": [
{ "source": "水", "target": "文娱", "value": 25 },
{ "source": "水", "target": "工业", "value": 25 },
{ "source": "风", "target": "文娱", "value": 25 },
{ "source": "风", "target": "工业", "value": 25 },
{ "source": "太阳", "target": "文娱", "value": 25 },
{ "source": "太阳", "target": "工业", "value": 25 },
{ "source": "文娱", "target": "工业", "value": 25 }
]
}
}
字段路径配置
在数据源配置时，您需要将字段路径设置为 data，以便系统正确解析并展示您提供的能流图数据。
# 漏斗图图表
一、外观样式配置
您可以在属性面板的外观选项卡下，对漏斗图的颜色进行个性化设置，以匹配您的图表主题或展示需求：
- 颜色设置： 提供丰富的颜色配置选项，您可以根据需要调整漏斗图各阶段颜色，打造风格统一的漏斗图。
二、数据绑定
漏斗图支持两种灵活的数据绑定方式，您可以根据实际需求选择最适合的方式：
方式一：绑定图例（快速配置） 在属性面板的数据选项卡下，您可以直接通过图例配置快速添加漏斗图数据：
方式二：绑定数据源（灵活配置）
对于更复杂的数据场景，您可以在属性面板的数据选项卡下的数据源配置区域，绑定外部数据源，实现漏斗图数据的动态加载：
数据源绑定 仪表盘可使用漏斗图API数据源进行绑定所使用的数据格式相同
效果图 
# 词云图表
词云图主要用于分析和呈现文本数据中出现频率较高的关键词的图表。词云图是一种常见的文本数据可视化图表，它通过将文本信息以不同大小的字体展示在图表中，直观地反映关键词的重要程度。字体越大，通常表示该词出现的频率越高，或者重要性越高。
您可以通过以下步骤配置并使用词云图：
一、外观样式配置
您可以在属性面板的外观选项卡下，对词云图的颜色进行个性化设置，以匹配您的图表主题或展示需求：
- 颜色设置： 提供丰富的颜色配置选项，您可以根据需要调整词云图中文字的颜色，打造风格统一的词云图。
二、数据绑定
词云图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获取并展示词云数据。
数据源格式要求
词云图支持JSON格式的数据源，数据需包含一个 数据项（data） 数组，数组中的每个对象定义一个词云中的词汇及其权重：
- data（数据项）: 数组形式，定义词云图中的词汇及其权重。每个数据项需包含词汇名称（name）和对应的权重值（value）。权重值决定了词汇在词云图中显示的大小，权重越大，字体越大。
数据源绑定 仪表盘可使用漏斗图API数据源进行绑定所使用的数据格式相同
效果图 
数据源配置示例
{
"data": [
{ "name": "雨伞", "value": 30 },
{ "name": "晴天", "value": 28 },
{ "name": "电话", "value": 24 }
]
}
# 柱线图
柱线图（Column-Line Chart）是柱状图（Column Chart）与折线图（Line Chart）的组合图表，通过在同一坐标系中叠加或并排展示两种数据形式，实现分类对比与趋势分析的双重功能。其核心特点包括：
- 分类对比：柱状图展示离散类别数据的数值差异（如产品销量、部门预算）。
- 趋势分析：折线图展示连续数据的变化趋势（如时间序列的销售额增长、温度变化）。
- 双坐标轴支持：可配置左右双Y轴，适配不同量纲的数据（如金额与百分比）。
- 交互性：支持数据标签、提示框（Tooltip）及动态筛选，提升分析灵活性。
一、数据绑定
柱线图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获取数据。
数据源格式要求
柱线图支持JSON格式的数据源，数据需包含一个 数据项（data） 数组.
数据源绑定：可使用柱线图API数据源进行绑定所使用的数据格式相同
效果图 
数据源配置示例
{
"xAxis": [
"设备层(感知层)",
"网络层",
"平台层",
"应用层",
"能耗损耗"
],
"bar": {
"legend": "各层能耗占比",
"data": [
40,
25,
20,
10,
5
]
},
"line": {
"legend": "能耗变化率",
"data": [
25,
15,
15,
6,
3
]
}
}
# 矩形树图
矩形树图（Treemap）是一种用于可视化分层数据的数据图表，通过嵌套的矩形展示数据的层次结构和占比关系。其核心特点包括：
- 面积表示数值：矩形面积越大，表示子数据在整体中的占比越大。
- 颜色区分类别：不同颜色代表不同类别或维度。
- 层级结构清晰：通过嵌套矩形展示父子关系，适合多层级数据。
- 交互支持：支持联动、跳转、下钻等操作，提升数据分析效率。
您可以通过以下步骤配置并使用矩形树图：
一、数据绑定
矩形树图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获数据。
数据源绑定
效果图
数据源配置示例
注：可以有多个根节点
[
{
"name": "物联网系统总能耗",
"value": 100,
"children": [
{
"name": "设备层(感知层)",
"value": 40,
"children": [
{
"name": "传感器集群",
"value": 25,
"children": []
},
{
"name": "执行器设备",
"value": 15,
"children": []
}
]
},
{
"name": "网络层",
"value": 25,
"children": [
{
"name": "5G通信",
"value": 15,
"children": []
},
{
"name": "LoRaWAN",
"value": 10,
"children": []
}
]
},
{
"name": "平台层",
"value": 20,
"children": [
{
"name": "边缘计算节点",
"value": 15,
"children": []
},
{
"name": "云计算中心",
"value": 5,
"children": []
}
]
},
{
"name": "应用层",
"value": 10,
"children": [
{
"name": "智能城市应用",
"value": 6,
"children": []
},
{
"name": "工业监控系统",
"value": 4,
"children": []
}
]
},
{
"name": "能耗损耗",
"value": 5,
"children": [
{
"name": "设备待机损耗",
"value": 3,
"children": []
},
{
"name": "数据传输损耗",
"value": 2,
"children": []
}
]
}
]
}
]
# 行政区地图
行政区地图控件是用于在地图应用中展示和管理行政区划（如国家、省、市、区等）的交互式组件，其核心功能包括：
- 多层级展示。
- 数据绑定与可视化。可与后台数据结合，如根据行政区划展示统计数据（人口、经济等），支持颜色或高度动态渲染。示例：Mapbox通过fill-extrusion属性实现3D效果，结合属性数据动态调整区域高度
- 样式定制允许自定义颜色、线条粗细、填充效果等，以适配不同应用场景。示例：Echarts的分级色彩映射，根据数据值自动调整区域颜色深浅。
您可以通过以下步骤配置并使用行政区地图：
一、数据绑定
- 上传GeoJson文件（国内地图GeoJson可在地区选择器 (opens new window)中进行获取）
- 行政区地图样式及数据颜色可直接在属性面板中进行配置
- 行政区地图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获数据。
数据源绑定
效果图
数据源配置示例（数据源需要跟GeoJson文件中的城市一一对应）
[
{
"name": "长沙市",
"value": 1061.65
},
{
"name": "株洲市",
"value": 385.2
},
{
"name": "湘潭市",
"value": 270.1
},
{
"name": "衡阳市",
"value": 657.3
},
{
"name": "邵阳市",
"value": 638.1
},
{
"name": "岳阳市",
"value": 498
},
{
"name": "常德市",
"value": 521.3
},
{
"name": "张家界市",
"value": 150.4
},
{
"name": "益阳市",
"value": 373
},
{
"name": "郴州市",
"value": 460.5
},
{
"name": "永州市",
"value": 514.2
},
{
"name": "怀化市",
"value": 445.6
},
{
"name": "娄底市",
"value": 376.8
},
{
"name": "湘西土家族苗族自治州",
"value": 239.2
}
]
# 视频控件
# 视频控件
视频控件通过绑定视频流地址或设备标识符，实现视频内容的动态播放功能。用户可根据实际场景需求，自定义控件尺寸及播放参数。
配置步骤
- 控件创建与布局
- 在画布编辑区域添加视频控件，通过拖拽边缘调整控件宽度与高度，适配界面布局。
- 数据绑定与播放设置
- 导航至**「数据」选项卡**，进入**「视频数据」配置栏**：
- 视频源绑定：输入设备编号（如摄像头硬件ID）或直接填写视频流地址（支持RTSP/HTTP/HLS等协议）。
- 播放模式设置：根据需求选择「自动播放」「手动触发」或「循环播放」模式。
- 导航至**「数据」选项卡**，进入**「视频数据」配置栏**：
注意事项
- 视频地址需确保网络可访问性，本地文件路径建议使用绝对路径（如
file:///C:/videos/sample.mp4）。 - 摄像头控件ID需唯一，重复ID可能导致联动失效。
通过以上配置，可高效实现视频播放与交互控制功能，满足安防监控、多媒体展示等场景需求。
# 视频轮播控件
视频轮播控件支持通过绑定多个视频源（设备号或流地址），实现多路视频的自动/手动轮播切换，适用于多监控点巡查、广告轮播等场景。
配置步骤
- 启用轮播模式
- 选中画布中的视频轮播控件，在右侧 「属性数据」面板 找到 「自动切换」 配置项：
- 关闭：手动点击控件切换视频源。
- 开启：设置轮播间隔时间（如5秒/10秒），实现自动循环播放。
- 选中画布中的视频轮播控件，在右侧 「属性数据」面板 找到 「自动切换」 配置项：
# 视频数据列表
视频数据列表控件通过与视频轮播控件深度绑定，实现视频源名称的动态渲染及交互控制，适用于监控点位快速切换、视频资源集中管理等场景。
配置步骤
绑定视频轮播控件
- 选中画布中的视频数据列表控件，在右侧 「数据」选项卡 底部找到 「绑定轮播ID」 字段：
- 点击下拉菜单，选择已创建的视频轮播控件（如
VideoRotator_01）。 - 绑定成功后，列表将自动同步该轮播控件的视频组配置中的
name字段，生成可点击的视频源名称列表。
- 点击下拉菜单，选择已创建的视频轮播控件（如
- 选中画布中的视频数据列表控件，在右侧 「数据」选项卡 底部找到 「绑定轮播ID」 字段：
2. 元素样式精细化调整
- 字体与颜色：
- 设置标题、描述文本的字体大小、加粗及颜色（建议使用高对比度配色）。
- 交互状态：
- 定义「正常态」「悬停态」「选中态」的背景色与边框样式，提升操作反馈。
- 边框与间距：
- 调整列表项的圆角半径、内边距及外边框样式，实现视觉统一性。
# 统计图表控件
# 折线统计图
折线统计图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获取并展示折线统计图。
数据源格式示例如下
[{
"data": [520, 932, 901, 934, 1290, 1330, 1320],
"type": "line",
"name": "类型一"
},
{
"data": [960, 760, 1165, 1386, 860, 1311, 1000],
"type": "line",
"name": "类型二"
}]
# 历史数据图
图例新增操作 在界面指定区域单击「+新增图例」按钮，展开数据配置面板。 数据检索弹窗激活 点击搜索图标（放大镜标识）弹出「设备数据绑定」对话框，支持通过设备名称/ID进行关联设备筛选。
其中时间间隔表示在指定时间减去时间间隔至指定时间加上时间间隔范围内取到的最后时刻的值为该时间点的值。
以下是添加了详细注释的 ECharts 配置代码，帮助理解各配置项的作用：
{
"echarts": {
"option": {
// 图表网格布局配置
"grid": {
"top": "20%", // 图表距容器顶部距离（留出图例空间）
"bottom": "10%", // 图表距容器底部距离（留出坐标轴标签空间）
"containLabel": true,// 确保坐标轴标签完整显示
"right": "10%", // 右侧边距
"left": "10%" // 左侧边距
},
// 图例配置
"legend": {
"orient": "horizontal", // 图例水平排列
"top": "5%", // 图例距顶部位置
"data": [], // 图例数据（空数组表示动态绑定）
"textStyle": { // 图例文字样式
"fontSize": 12, // 字体大小
"color": "#CCCED1" // 字体颜色（浅灰色）
}
},
// 提示框配置
"tooltip": {
"trigger": "axis", // 触发类型：坐标轴触发
"axisPointer": { // 坐标轴指示器配置
"type": "shadow" // 指示器类型：阴影效果
}
},
// X轴配置
"xAxis": {
"type": "category", // 类目轴（适合离散数据）
"boundaryGap": false, // 坐标轴不留白边（折线贴边）
"data": [], // 轴数据（空数组表示动态绑定）
"axisTick": { // 刻度线配置
"alignWithLabel": true // 刻度线与标签对齐
},
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 字体大小
"color": "#CCCED1" // 字体颜色（浅灰色）
},
"axisLine": { // 坐标轴线样式
"lineStyle": {
"color": "rgba(255, 255, 255, 1)", // 白色实线
"width": 0.5 // 轴线粗细
}
},
"nameTextStyle": { // 轴名称样式（当前未设置颜色）
"color": "" // 需补充轴名称颜色值
}
},
// Y轴配置
"yAxis": {
"type": "value", // 数值轴（适合连续数据）
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 字体大小
"color": "#CCCED1" // 字体颜色（浅灰色）
},
"splitLine": { // 分割线配置
"lineStyle": {
"type": "dashed", // 虚线类型
"color": "rgba(255, 255, 255, 0.2)", // 半透明白色虚线
"width": 0.5 // 线宽
}
},
"nameTextStyle": { // 轴名称样式（当前未设置颜色）
"color": "" // 需补充轴名称颜色值
}
},
// 颜色配置（按系列顺序应用）
"color": [
"#d11b1b", // 系列1颜色（深红色）
"#1bc0d1" // 系列2颜色（青蓝色）
],
// 数据系列配置
"series": [
{
"data": [ // 系列1数据（示例值）
1682, 1290, 1330, 1320, 520, 932, 901
],
"type": "line", // 折线图类型
"name": "类型一" // 系列名称（对应图例）
},
{
"data": [ // 系列2数据（示例值）
960, 760, 1165, 1386, 860, 1311, 1000
],
"type": "line", // 折线图类型
"name": "类型二" // 系列名称（对应图例）
}
]
}
}
}
此配置适用于需要展示双时间序列数据对比的场景，如：
- 实时监控数据对比
- 历史趋势分析
- 多维度指标跟踪
- 实时数据看板集成
数据绑定 历史数据图的数据绑定在属性面板的数据选项卡下完成。您需要通过数据源配置区域绑定数据源，并指定字段路径，以获取并展示折线统计图。 数据源格式示例如下
[{
"data": [520, 932, 901, 934, 1290, 1330, 1320],
"type": "line",
"name": "类型一"
},
{
"data": [960, 760, 1165, 1386, 860, 1311, 1000],
"type": "line",
"name": "类型二"
}]
# 历史数据报表图
点击如历史数据报表图中的放大镜图标，绑定设备号。在点值下方周期中个周期代表的含义如下：
天：用来表示从当前时刻开始往前的24小时，时间间隔表示24小时分为（24/时间间隔）份。
周：里面包含七个点，分别表示往前推的七天内的数值
月：包含30个点，用于表示当前日期往前30天内的数据
年：包含12个点，每个点代表一个月。
（该折线图x轴会自动补全标题）
以下是添加了详细注释的 ECharts 配置代码，帮助理解各配置项的作用：
{
"echarts": {
"option": {
// 容器网格布局配置
"grid": {
"top": "20%", // 图表距容器顶部距离（为图例预留空间）
"bottom": "10%", // 图表距容器底部距离（为坐标轴标签预留空间）
"containLabel": true,// 确保坐标轴标签完整显示不裁剪
"right": "10%", // 右侧边距（防止标签溢出）
"left": "10%" // 左侧边距
},
// 图例组件配置
"legend": {
"orient": "horizontal", // 图例水平排列
"top": "5%", // 图例组件距容器顶部位置
"data": [], // 图例数据项（需通过API动态填充）
"textStyle": { // 图例文字样式
"fontSize": 12, // 字体大小12px
"color": "#CCCED1" // 字体颜色（浅灰色系）
}
},
// 提示框组件配置
"tooltip": {
"trigger": "axis", // 触发类型：坐标轴触发
"axisPointer": { // 坐标轴指示器配置
"type": "shadow" // 指示器类型为阴影效果（适用于折线图）
}
},
// X轴配置
"xAxis": {
"type": "category", // 类目轴（适用于离散数据）
"boundaryGap": false, // 坐标轴不留白边（折线贴边显示）
"data": [], // 类目数据（需动态绑定时间点/标签）
"axisTick": { // 坐标轴刻度配置
"alignWithLabel": true // 刻度与标签对齐
},
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 标签字体大小
"color": "#CCCED1" // 标签颜色（浅灰色）
},
"axisLine": { // 坐标轴轴线样式
"lineStyle": {
"color": "rgba(255, 255, 255, 1)", // 白色实线轴线
"width": 0.5 // 轴线宽度0.5px
}
},
"nameTextStyle": { // 坐标轴名称样式（当前未配置颜色）
"color": "" // 需补充颜色值（如"#CCCED1"）
}
},
// Y轴配置
"yAxis": {
"type": "value", // 数值轴（适用于连续数据）
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 标签字体大小
"color": "#CCCED1" // 标签颜色（浅灰色）
},
"splitLine": { // 网格线配置
"lineStyle": {
"type": "dashed", // 虚线类型
"color": "rgba(255, 255, 255, 0.2)", // 半透明白色虚线
"width": 0.5 // 线宽0.5px
}
},
"nameTextStyle": { // 坐标轴名称样式（当前未配置颜色）
"color": "" // 需补充颜色值（如"#CCCED1"）
}
},
// 颜色配置（按数据系列顺序应用）
"color": [
"#f9a1f6", // 系列1颜色（粉色系）
"#9dff91" // 系列2颜色（薄荷绿系）
],
// 数据系列配置
"series": [
{
"data": [ // 当前系列数据（示例值）
960, 760, 1165, 1386, 860, 1311, 1000
],
"type": "line", // 图表类型：折线图
"name": "类型二" // 系列名称（对应图例标识）
// 注意：当前仅配置1个数据系列，color数组定义了2种颜色（第二个颜色未使用）
}
]
}
}
}
# 双Y轴曲线图
双Y轴曲线相对于历史曲线图，多了绑定Y轴的选项，根据选择的数据，决定该图例的数据与某条Y轴相关联，其他设置与历史曲线相同。
以下是添加了详细注释的 ECharts 配置代码，帮助理解各配置项的作用：
{
"echarts": {
"option": {
// 容器网格布局配置
"grid": {
"top": "20%", // 图表距容器顶部距离（为顶部图例预留空间）
"bottom": "10%", // 图表距容器底部距离（为底部标签预留空间）
"containLabel": true,// 自动调整尺寸确保坐标轴标签完整显示
"right": "10%", // 右侧边距（防止标签溢出）
"left": "10%" // 左侧边距
},
// 图例组件配置
"legend": {
"orient": "horizontal", // 图例水平排列
"top": "5%", // 图例组件距容器顶部位置
"data": [], // 图例数据项（需通过API动态填充）
"textStyle": { // 图例文字样式
"fontSize": 12, // 字体大小12px
"color": "#CCCED1" // 字体颜色（浅灰色系）
}
},
// 提示框组件配置
"tooltip": {
"trigger": "axis", // 触发类型：坐标轴触发（显示关联数据点）
"axisPointer": { // 坐标轴指示器配置
"type": "shadow" // 指示器类型为阴影效果（适用于折线图）
}
},
// X轴配置
"xAxis": {
"type": "category", // 类目轴（适用于离散数据展示）
"boundaryGap": false, // 坐标轴不留白边（折线贴边显示）
"data": [], // 类目数据（需动态绑定时间点/标签）
"axisTick": { // 坐标轴刻度配置
"alignWithLabel": true // 刻度与标签对齐
},
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 标签字体大小
"color": "#CCCED1" // 标签颜色（浅灰色）
},
"axisLine": { // 坐标轴轴线样式
"lineStyle": {
"color": "rgba(255, 255, 255, 1)", // 白色实线轴线
"width": 0.5 // 轴线宽度0.5px
}
},
"nameTextStyle": { // 坐标轴名称样式（当前未配置颜色）
"color": "" // 需补充颜色值（如"#CCCED1"）
}
},
// Y轴配置（双Y轴配置）
"yAxis": [
{
"name": "11", // 左Y轴名称（需替换为实际含义）
"type": "value", // 数值轴（适用于连续数据）
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 标签字体大小
"color": "#CCCED1" // 标签颜色（浅灰色）
},
"splitLine": { // 网格线配置
"lineStyle": {
"type": "dashed", // 虚线类型
"color": "rgba(255, 255, 255, 0.2)", // 半透明白色虚线
"width": 0.5 // 线宽0.5px
}
},
"nameTextStyle": { // 坐标轴名称样式（当前未配置颜色）
"color": "" // 需补充颜色值（如"#CCCED1"）
}
},
{
"name": "22", // 右Y轴名称（需替换为实际含义）
"type": "value", // 数值轴（适用于连续数据）
"axisLabel": { // 坐标轴标签样式
"fontSize": 12, // 标签字体大小
"color": "#CCCED1" // 标签颜色（浅灰色）
},
"splitLine": { // 网格线配置
"show": false, // 隐藏右侧Y轴网格线（避免视觉干扰）
"lineStyle": {
"type": "dashed",
"color": "rgba(255, 255, 255, 0.2)",
"width": 0.5
}
},
"nameTextStyle": { // 坐标轴名称样式（当前未配置颜色）
"color": "" // 需补充颜色值（如"#CCCED1"）
}
}
],
// 颜色配置（按数据系列顺序应用）
"color": [
"#d11b1b", // 系列1颜色（深红色系）
"#1bc0d1" // 系列2颜色（青蓝色系）
],
// 数据系列配置
"series": [
{
"data": [ // 系列1数据（示例值）
1682, 1290, 1330, 1320, 520, 932, 901
],
"type": "line", // 图表类型：折线图
"name": "类型一", // 系列名称（对应图例标识）
"yAxisIndex": 0 // 绑定到第一个Y轴（左侧）
},
{
"data": [ // 系列2数据（示例值）
960, 760, 1165, 1386, 860, 1311, 1000
],
"type": "line", // 图表类型：折线图
"name": "类型二", // 系列名称（对应图例标识）
"yAxisIndex": 1 // 绑定到第二个Y轴（右侧）
}
]
}
}
}
典型应用场景：
- 双指标对比分析（如温度/湿度）
- 多量纲数据可视化（如销售额/利润率）
- 实时监控仪表盘（需配合动态数据更新）
- 金融数据对比（如股票价格/成交量）
# 物模型控件
- 查看物模型信息 在组件选项卡中可直观查看当前产品关联的物模型信息，支持快速识别设备属性、服务及事件定义。
- 添加物模型至画布
通过可视化拖拽操作将物模型部署到工作区，建立可视化开发基础：
- 在组件库中找到目标物模型
- 按住鼠标左键将其拖拽至画布设计区域
- 松开鼠标完成物模型实例化
- 设备绑定流程
完成物模型部署后，需绑定实际设备以建立数据关联：
- 在设备列表中选择目标设备
- 显示设备名称、型号、在线状态等关键信息
- 支持多设备批量绑定操作
- 点击「确定」完成绑定配置
- 在设备列表中选择目标设备
3.3 验证绑定结果
- 绑定成功后物模型控件将显示设备连接状态标识
- 可通过「设备模拟器」进行数据交互测试
- 支持在「设备管理」模块查看完整绑定关系
