检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig:
使用华为云Astro大屏应用预置模板搭建交通管理大屏 场景说明 交通管理大屏用于监控城市的交通状态，如进出城车辆、路况信息和交通指数等，效果如图1所示。本入门以使用华为云Astro大屏应用中预置模板构建一个交通管理大屏为例，向您介绍如何在华为云Astro大屏应用中快速构建可视化页面。
您可以通过“Excel模式”和“Json模式”两种模式设置静态数据。设置为“Excel模式”时，可执行如下操作： 单击“文件导入”，可将本地的数据导入到当前组件中使用。仅支持导入CSV和Excel格式的文件，且文件大小不能超过100KB。 执行导入操作前，请单击“？”，查看当前组件对静态数据字段的要求。例如
分析服务。用户不需要管理任何服务器，即开即用。支持标准SQL/Spark SQL/Flink SQL，支持多种接入方式，并兼容主流数据格式。数据无需复杂的抽取、转换、加载，使用SQL或程序就可以对云上CloudTable、RDS、DWS、CSS、ECS自建数据库以及线下数据库的异构数据进行探索。
通过移动页面，将页面移动到其他文件夹中，便于页面集中管理。 移动页面 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在对应的页面上，单击“...”，选择“移动”。 选择目标文件夹，单击“确定”。 图1
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
（可选）项目创建后，可参考项目管理中内容，对项目进行设置。 创建文件夹 项目创建后，支持在项目中创建文件夹，用于集中管理页面。 在“移动端项目”页面，单击“所有页面”后的“...”，选择“新建文件夹”。 在创建文件夹页面，输入文件夹标题，单击“确定”，即可在项目中创建文件夹。 文件夹标题的长度不能超过64个字符，
（可选）项目创建后，可参考项目管理中内容，对项目进行设置。 新建文件夹 项目创建后，支持在项目中新建文件夹，用于集中管理页面。 在“大屏&PC端项目”页面，单击“所有页面”后的“...”，选择“新建文件夹”。 在创建文件夹页面，输入文件夹标题，单击“确定”，即可在项目中创建文件夹。 文件夹标题的长度不能超过64个字
管理页面 管理组件模板 桥接器模板 查看操作日志
单击“编辑页面”，进入大屏开发页面。 在页面上方工具栏中，单击，即可将当前页面下载到本地。 下载到本地的页面模板文件命名为“当前页面的名称”.page。 图1 将大屏页面保存为页面模板文件 父主题： 页面管理
在组件“.js”文件逻辑代码中，使用“thisObj.triggerEvent()”方法触发该事件时，要将变量字段传入发送的data中。 fields[0].desc 变量的中英文描述，可选配置。 在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。
组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
editor.js：组件核心渲染文件。组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt：组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 {widget}.js：组件逻辑文件，整个Widget的渲染核
平台预置丰富模板，凝聚最佳实践，帮助用户快速完成大屏创建，实现数据可视化、运作数字化。 特性优势 丰富的预置模板：涵盖政务、交通、电力等多个垂直领域，模拟数据分析、设备监控、环境监测、产品展示等多个典型应用场景。 自定义模板能力：用户可以自定义定制模板，沉淀自己的最佳实践，分享复用。 项目模板：可以将多个大屏
Condition 方法 API接口的HTTP方法。 GET：请求服务器返回指定资源。 PUT：请求服务器更新指定资源。 POST：请求服务器新增资源或执行特殊操作。 DELETE：请求服务器删除指定资源。 PATCH：请求服务器更新资源的部分内容。当资源不存在时，PATCH可能会去创建一个新的资源。
css 组件的样式文件，在该文件中编写组件的CSS样式。 EchartsWidgetTemplate.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件。 widegtApi
将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio
MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
交互，请参见echarts组件自定义动作交互设置。 异步加载 对于部分配置项，初始化echarts之前需要异步加载文件。例如“地图（SVG）”组件需要先加载svg文件。这里需要在异步加载动作的完成回调函数中，手动调用echarts的setOption。 图8 异步加载 引入第三方库
getWidgetBasePath 获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源。 getMessages 获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用。 hideWidget 隐藏组件。 showWidget 显示组件。 triggerEvent
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
