华为云用户手册

更新桥接器 更新桥接器前，请先获取锁，否则更新按钮置灰不可用。 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的桥接器”。 将鼠标放在对应的桥接器上，单击，获取锁。 锁定后，单击，进入更新桥接器页面。 图4 进入更新桥接器页面 在桥接器更新页面，上传新的桥接器、设置桥接器参数，单击“更新”。 图5 设置桥接器信息 将鼠标放在对应的桥接器上，单击，可查看到桥接器的新版本。 ：单击该图标，可下载当前版本桥接器。 ：单击该图标，可在线编辑该版本桥接器。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 在所有页面中，单击待发布为模板的页面。 单击“编辑页面”，进入大屏开发页面。 在大屏开发页面，单击，选择“发布为模板”。 填写模板名称和模板描述，单击“发布”。 模板名称的长度不能超过60个字符，且只能包含字母、数字、汉字及特殊符号“-”或“_”。 图1 发布自定义页面模板 发布完成后，本租户下的其他用户登录AstroCanvas新建页面时，即可在“自定义模板”中，使用页面模板创建页面。 图2 使用自定义模板创建页面

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“AstroZero”，配置数据源参数。 图1 数据源 数据源名称：新建数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 域名 ：AstroZero环境的域名，需要携带“https://”。 客户端ID：调用AstroZero接口前，需要配置“客户端模式”OAuth鉴权的客户端ID，获取方法请参考客户端模式接入认证。 OAuth认证过程中，新建认证密钥时授权类型需选择“客户端模式”，用户建议选择具有管理员权限（System Administrator Profile）的用户。 客户端密码：调用AstroZero的接口前，需要配置“客户端模式”OAuth鉴权的客户端鉴权密钥，获取方法请参考客户端模式接入认证。 描述：新建数据源的描述信息。 单击“连接测试”，显示“连接成功”，表示数据源可以调通。 单击“保存”，完成数据源的创建。

新建目录 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的素材”。 单击所有素材后的，选择“新增目录”。 输入目录名称，单击“确定”。 目录名称长度为1~64个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 目录创建完成后，支持修改目录名称、删除目录，也可以在当前目录下创建子目录。 图2 管理目录

操作步骤 在A环境AstroCanvas界面的“项目列表”页签中，鼠标悬浮在待下载的项目上，单击。 在版本管理中，鼠标放在对应版本后的“操作”下，单击。 图1 下载对应版本的项目包 根据业务需求，选择运行容器，单击“下载”。 图2 选择运行容器 运行容器：选择项目包的运行容器。 Astro Canvas：使用该运行容器下载的项目包，可在其他AstroCanvas环境的项目列表中，通过单击“导入项目包”进行安装使用，实现将环境A迁移项目到环境B。 OneMobile：使用该运行容器下载的项目包，可在华为OneMobile上安装运行。选择此方式时，还需配置应用ID、主页、环境类型等参数。 图3 OneMobile 应用ID：小程序AppID，请登录小程序管理后台获取。 主页：选择一个发布的页面作为首页，即打开小程序时，显示的默认页面。 环境类型：承载应用程序服务的环境类型，支持开发环境、生产环境、沙箱环境和不依赖。 开发环境：开发者专门用于开发应用的环境，用户可根据需求自定开发配置各种逻辑模块化元素，从而创建各种应用。 沙箱环境：在应用正式发布上线前，需要在测试环境进行测试，包含数据配置。 生产环境：应用正式发布上线的真实环境。测试完成后，将应用发布至生产环境，即运行环境，供业务用户使用。 不依赖：不依赖任何环境。 生产环境/沙箱环境 域名：提供服务环境的域名，如https://www.demo.com。 生产环境/沙箱环境 租户ID：提供服务环境的租户ID。 将下载到本地的项目安装包，发送给其他需要安装的用户。 其他用户在B环境AstroCanvas界面，单击“导入项目包”。 图4 导入项目包 选择安装包，安装该项目即可。 安装成功后，界面会显示“安装包成功”。在已安装的项目上，单击项目图标，即可进入该项目。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“DWS”，配置数据源参数。 图1 新建DWS数据源 数据源名称：数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 域名：数据库所在的域名。 端口：数据库端口，取值范围为0~65535。 用户名：登录数据库的用户名。 密码：数据库用户密码。 数据库名称：数据库实例名称。 描述：新建数据源的描述信息。 单击“连接测试”，显示“连接成功”，表示DWS数据源可以调通。 单击“保存”，完成数据源的创建。

配置示例 slider配置示例如下，配置后效果如图1所示。 { "type": "slider", "name": "commProps.mySliderStr", "value": "64%", "label": { "zh_CN": "sliderstr的类型", "en_US": "sliderstr Type Example" }, "append": "%", "step": 0.01, "stepStrictly": true, "precision": 2, "min": 20, "max": 100, "showInput": true } 图1 配置后效果

配置示例 radio配置示例如下，配置后效果如图1所示。 { "type": "radio", "name": "commProps.myRadio", "value": "我是radio的类型", "label": { "zh_CN": "radio的类型", "en_US": "radio Type Example" }, "sourceLabel": "label", "sourceKey": "value", "options": [{ "value": "happy", "label": { "zh_CN": "开心", "en_US": "primary" } }, { "value": "sad", "label": { "zh_CN": "不开心", "en_US": "dashed" } } ] } 图1 配置后效果

操作步骤 选中某个echarts组件，单击。 在自定义动作中，单击“新增自定义动作”，修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中，输入如下代码，调用echarts提供的动作API。 echartsInst.dispatchAction({ type: 'highlight', dataIndex: params.dataIndex, }); 单击“新增参数”，设置参数名称为“dataIndex”。 图2 新增dataIndex字段 选中echarts组件，单击，进入组件交互页面。 在作为触发器中，单击“交互事件”，选择“组件加载”。 在响应动作中，单击“响应动作”，选择“组件响应”。 在动作详情中，“响应组件”选择echarts组件，“响应动作”选择“设置数据高亮”，“dataIndex”设置为“0”。 图3 设置动作详情 保存交互设置，预览页面，echarts组件渲染首个数据获得高亮效果。 图4 查看渲染效果

操作步骤 参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“资产中心”。 在全部模板页签中，单击和您的业务类似的应用模板。 在弹出的页面，单击“安装应用”。 图1 单击安装应用 系统跳转到AstroCanvas界面，输入“项目名称”和“页面标题”，单击“确定”，完成大屏应用的创建。 大屏应用安装完成或，您可以直接使用该应用，也可以根据自身业务的需求进行二次开发。 图2 输入项目名称和页面标题

文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription": "Echarts组件模板", "authorName": "李四", "width": "500", "height": "360", "i18n": [{ "name": "messages-en" }, { "name": "messages-zh" } ], "requires": [{ "name": "global_Vue", "version": "100.8.7" }, { "name": "global_VueI18n", "version": "100.7.8" }, { "name": "global_echarts", "version": "102.0.4" } ] }

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 图片地址：支持输入图片地址，来展示图片。 链接：设置单击图片后，跳转的链接地址。 图片设置：设置图片填充方式，并选择对应图片。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图8 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签行为：标签字数过多时是否进行处理，包括字数过多是否换行、字数过多是否省略。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小等设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小等设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 轴最大值：是否设置轴最大值，支持直接输入阈值。 反转：是否对轴数据进行反转。 柱间阴影：柱间是否显示阴影，支持自定义阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图10 指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小、颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小等。 左间距：图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到柱图组件顶部距离占组件高度。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：是否开启自定义图例显示设置。开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

参考线 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。 图9 参考线 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。 Y轴参考线 Y轴参考线：是否显示Y轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增Y轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。 X轴参考线 X轴参考线：是否显示X轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增X轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。

赋予成员Astro Canvas中角色（自定义工作空间） 赋予成员Astro Canvas中角色前，请确保待添加的成员已完成AstroCanvas服务权限，否则添加成员时无法选择到用户。 租户管理员参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“组织管理”。 在“角色与权限”页签，单击“Astro Canvas”。 在角色列表中，单击“创建工作空间”。 输入工作空间的名称，单击“保存”。 图6 新建工作空间 赋予成员自定义工作空间下的权限。 在已创建的工作空间下，选中某一个角色，单击“新增成员”。 图7 赋予成员所需权限 选中待添加的成员，单击“确定”。 已添加的成员，参考如何登录AstroCanvas中操作，登录AstroCanvas界面，切换到自定义工作空间，查看所拥有的权限。

赋予成员Astro Canvas中角色（默认工作空间） 赋予成员Astro Canvas中角色前，请确保待添加的成员已完成AstroCanvas服务权限，否则添加成员时无法选择到用户。 租户管理员参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“组织管理”。 在“角色与权限”页签，单击“Astro Canvas”。 在角色列表中，选中某一个角色，单击“新增成员”。 图5 单击所需的角色 选中待添加的成员，单击“确定”。 已添加的成员，参考如何登录AstroCanvas中操作，登录AstroCanvas界面，查看所拥有的权限。

赋予成员Astro Platform中角色 租户管理员参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“组织管理”。 在“角色与权限”页签，单击“Astro 平台”。 在角色列表中，选中创建角色并赋予基础权限中创建的角色，单击“新增成员”。 图2 单击所需的角色 选中待添加的成员（华为账号或者是华为账号的子账号），单击“确定”。 在角色的成员列表中，可查看到添加的成员。 已添加的成员，参考如何登录Astro低代码平台中操作，登录Astro低代码平台，查看所拥有的权限。 图3 组织层级只读权限 图4 企业信息只读权限

配置示例 textarea配置示例如下，设置后效果如图1所示。 { "type": "textarea", "name": "commProps.myTextarea", "value": "我是text的类型", "label": { "zh_CN": "textarea的类型", "en_US": "textarea Type Example" }, "rows": 3 } 图1 设置后效果

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 步骤条方向：步骤条显示方向，可以设置为水平方向或垂直方向。 步骤图标尺寸：步骤图标的尺寸，单位为px。 步骤图标背景：步骤图标的背景色。 完成状态：步骤已完成状态的颜色。 进行中状态：步骤进行中状态的颜色。 等待状态：步骤还未完成处于等待状态的颜色。 标签字体：设置步骤标签的字体、大小和颜色等。 描述文字字体：当步骤有描述文字时，描述文字的字体、大小等设置。 标题左边距：步骤标签距离该图标左边的距离。

跳转外部页面 外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的连接地址。 参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。 参考使用空白画布新建页面中操作，新建一个空白页面，并拖入玫瑰花饼图。 选中玫瑰花饼图，单击组件上方的，进入交互设置页面。 设置本页面与外部页面之间的跳转。 图11 设置与外部交付的页面 外部页面由于同源策略限制，暂不支持弹窗打开。 在填写外部页面地址时，需要将“http://”或“https://”请求头也一并填入。 单击，保存页面后单击，预览效果。

同项目不同页面之间的跳转 当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。 例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。 参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。 参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。 图1 页面一 单击，保存页面后单击，发布页面。 参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。 图2 页面二 图3 页面三 在页面一中，选中玫瑰花饼图，单击组件上方的，设置玫瑰花饼图和页面二之间的交互。 图4 与页面二之间的交互 页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。 内部页面：选择待跳转的具体页面。“页面类型”设置为“内部页面”时，才显示该配置。 外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。“页面类型”设置为“外部页面”时，才显示该配置。 页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。 设置页面参数：支持设置为“固定参数”和“变量参数”，设置为“变量参数”时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为“跳转页面URL?参数名=参数值”。 图5 设置为固定参数 图6 设置为变量参数 图7 跳转页面地址中会带上设置的参数 在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。 图8 与页面三之间的交互 单击，保存页面后单击，预览效果。 图9 单击玫瑰花饼图弹出页面二 图10 单击基本饼图弹出页面三

操作步骤 参考关系型数据库数据源中操作，新建关系型数据库数据源。 图1 新建关系型数据库数据源 参考关系型数据库中操作，新建关系型数据库数据集（新建变量value）。 图2 新建关系型数据库数据集 新建全局变量。 参考使用空白画布新建页面中操作，新建大屏空白页面。 在大屏开发页面，单击，新建全局变量，如hotSelect。 图3 新建全局变量hotSelect 在画布中，拖入地图组件和下拉选择框组件。 配置地图组件。 选中组件，单击组件上方的，设置组件数据来源。 在全局变量中，选择3中创建的全局变量hotSelect。 图4 选择全局变量hotSelect 在组件预览中，从表格字段中，拖拽对应的字段到配置中。 设置完成后，单击“保存”。 选择地图组件，单击组件上方的，显示热力图层，数据标题设置为“子公司完成率”，显示类型设置为“区间显示”，并设置填充颜色。 配置下拉选择框组件。 选中组件，单击组件上方的，进入组件数据配置页面。 数据类型选择“静态数据”，并输入如下示例数据。 { "dataValue": [{ "value": "子公司A完成率", "label": "子公司A完成率" }, { "value": "子公司B完成率", "label": "子公司B完成率" }, { "value": "子公司C完成率", "label": "子公司C完成率" } ] } 其中，“value”字段需要和数据列名保存一致。 设置完成后，单击“保存”。 配置下拉选择框交互动作。 选中下拉选择框组件，单击组件上方的，进入组件交互设置页面。 在“作为触发器”中，单击“+ 交互事件”，选择“当选中选项时”。 在“响应动作”中，单击“+ 响应动作”，选择“赋值全局变量”。 在“动作详情”中，选择3中定义的全局变量。 图5 选择全局变量 单击“确定”后，单击“完成”。 保存页面后，单击，预览效果。 图6 效果预览

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题：组件是否显示标题。设置为显示时，支持设置如下属性。 图4 组件标题 内容：自定义标题的内容。 字体：设置自定义标题的字体、大小和颜色等。 对齐：设置标题的对齐方式，如左对齐、居中或右对齐。 标题背景色：设置标题的背景颜色。 内边距： 设置标题距离组件上下左右边界的距离。 图5 设置上边距 标题偏移量：设置标题与指标之间的距离。 图6 标题偏移量 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。

场景说明 开发一个告警监控页面，如图1所示，在页面上方下拉框中选择告警状态，可查看各个地区相应状态下的告警数量分布。 实现原理：该场景中将告警状态定义为全局变量，在页面中使用系统预置的“下拉选择框”和“多区域折线图”组件。当用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。

步骤2 开发告警监控大屏页面 新建一个空白的大屏页面。 在AstroCanvas界面上方，单击“项目列表”。 在项目列表页面，单击“新建项目”。 输入项目名称，单击“新建”，新建一个大屏&PC端项目。 在新建的大屏&PC端项目中，单击“新建页面”。 单击“新建空白页面”，输入页面标题“全局变量示例页面”，单击“新建”。 在页面上方单击，新建并设置页面级全局变量。 新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。 图5 设置页面变量 在页面中拖入并设置下拉选择框组件。 从左侧全部组件中，搜索并拖拽“下拉选择框”组件到页面画布中。 图6 拖入下拉选择框 设置占位符为“请选择要筛选的告警状态”。 图7 设置占位符 在组件上方单击，配置组件数据源为静态数据，单击“保存”。 在输入数据中，输入如下静态数据示例： [{ "value": "1", "label": "待派单" }, { "value": "2", "label": "已派单" }, { "value": "3", "label": "处理中" }, { "value": "4", "label": "已关闭" } ] 在组件上方单击，配置组件交互事件。 在作为触发器中，单击“交互事件”，选择“当选中选项时”事件。单击“响应动作”，选择“赋值全局变量”，“赋值到变量”设置为“status”，单击“确定”。单击“完成”，设置后用户在下拉框选择相应告警状态时，全局变量“status”的值会随着进行相应变化。 图8 配置组件交互事件 在页面中拖入并设置多区域折线图组件。 从左侧全部组件中，搜索并拖拽“多区域折线图”，到下拉选择框组件下方。 设置组件标题为“告警分布情况”。 图9 设置组件标题 在组件上方单击，配置组件数据。 数据配置中选择“数据集”，选择4配置的“getWarnDetailByStatus”数据集。 全局变量中选择2配置的“status”，给接口入参“statusCode”告警状态绑定页面全局变量“status”。 图10 选择全局变量 设置多区域折线图数据集展示，X轴数据拖入“hab_RegionName_ CS T”（地区），Y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。 设置完成后，单击页面上方的，保存页面。 保存成功后，单击，预览效果是否符合预期。 选择下拉框数据为“已派单”、“处理中”或者“已关闭”，发现多区域折线图数据进行实时更新变化，符合预期。

自动编号 自动编号用于为每一条记录自动生成一个自定义格式的编号。 在表单开发页面，从“数据组件”中，拖拽“自动编号”组件至表单设计区域，如图1。 图1 自动编号 显示名称：该组件在页面呈现给用户的名称，可以设置为中文，也可以设置为英文。 编号模式：选择编号模式，如默认或自定义。默认格式为从1开始的递增序号，例如1,2,3… 属性：设置字段的属性，勾选“隐藏”后，页面上会隐藏该字段。 宽度：该字段配置框的宽度，占页面宽度的比例。 问号提示：当该字段较难理解时，可通过配置“问号提示”告诉用户该字段的含义、如何配置等，可以设置为中文，也可以设置为英文。 设置后，页面该字段旁会有问号图标，单击后会显示配置的“问号提示”内容。 描述信息：设置组件的描述信息。 父主题： 零码组件介绍

百分比 百分比组件用于记录比例、比率等数值。使用该组件录入数据时，系统会默认在数据后加上百分号“%”。 在表单开发页面，从“数据组件”中，拖拽“百分比”组件至表单设计区域，如图1。 图1 百分比 显示名称：该字段在页面呈现给用户的名称，可以设置为中文，也可以设置为英文。 保留小数位数：支持设置精确保留的小数位数，适用于金额录入等场景。 显示：填写的数值是否允许为负数，默认允许输入负数，如-123。 验证：对字段进行限制设置。 必填：该字段是否必填。 限定范围：限定数值填写的范围，例如0.01-99.99。 属性：设置字段的属性，包括只读、禁用和隐藏。 只读：勾选后，页面上该字段只可读。 禁用：勾选后，页面上该字段仍可显示，但不可进行配置。 隐藏：勾选后，页面上会隐藏该字段。 宽度：该字段配置框的宽度，占页面宽度的比例。 默认值：支持设置如下默认值。 其他字段值：该表单内的其他定位组件、关联记录中的定位字段。 关联数据：关联已有数据，即取查询到的，最新的一条数据作为默认值。 图2 配置默认值 公式编辑：给表单中的某个字段编辑公式后，在填写表单或修改表单数据时，可以使该字段的值根据公式自动计算出来，不需要再手动填写，提高效率。 引导文字：当用户没有配置该字段值时，在界面显示的引导文字，可以设置为中文，也可以设置为英文。 问号提示：当该字段较难理解时，可通过配置“问号提示”告诉用户该字段的含义、如何配置等，可以设置为中文，也可以设置为英文。 设置后，页面该字段旁会有问号图标，单击后会显示配置的“问号提示”内容。 描述信息：设置组件的描述信息。 父主题： 零码组件介绍