检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
组件入门 什么是组件？ 组件（即Widget）是可复用的页面组成元素，一个页面由一个或多个Widget拼装而成。如果将一个页面看成拼图游戏的完整图案，那么Widget相当于拼图的每一小块。 Widget的运行依赖Library，如果缺少相应的Library，则Widget不能正常
大屏页面嵌入第三方系统时（例如以iframe形式嵌入），如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。 设置内容安全策略 参考使用模板新建页面中操作，创建一个大屏页面。
长度为8~32位，仅包含英文字母、数字、特殊字符。 至少包含一个英文小写字母（a-z）。 至少包含一个英文大写字母（A-Z）。 至少包含一个数字（0-9）。 至少包含一个特殊字符（~!@#$%^&*()_=+\|[]{};:'",<.>/?-） 设置完成后，访问页面时，需要输入分享码，才能正常进入页面。
使用AstroCanvas开发告警处理情况统计移动端页面 应用场景 通过AstroCanvas开发一个告警处理情况移动端页面，开发完成后，用户可通过移动端访问该页面，查看告警处理情况。移动端页面构想，如图1所示。 图1 移动端页面效果 图1中移动端页面，由下列组件拼装而成。 表1 组件说明 组件 说明 水平基本柱图 分
zip“。 图17 选择本地部署的页面 添加可视化应用。 在项目列表中，单击“导入项目包”。 选择2中下载的可视化应用本地部署包（AstroCanvas_项目名_随机编码.zip）。 在项目列表中，可查看到项目已成功导入。 图18 查看导入的项目 配置数据源密码和加密字段。 在运行环境中导
力，兼容PostgreSQL生态。助力企业经济高效地对海量数据进行在线分析，实现数据快速变现。更多关于DWS的介绍，请参见DWS产品文档。 前提条件 连接的数据源已创建，如何创建请参见DWS数据源。 约束与限制 配置DWS数据集时，输入的SQL语句中如果含有和DWS数据库中字段名称相同的关键字，关键字需要加双引号
购买AstroCanvas实例 在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。 AstroCanvas提供了“Astro大屏应用基础版”、“Astro
参考创建并提交Spark SQL作业中操作，创建队列、数据库和表。 例如，创建了数据库tpch，且数据库中预置了所需的表。 图1 tpch数据库 单击已创建的数据库tpch，进入tpch数据库。 （可选）双击对应的表，右侧会显示对应的查询语句，单击“设置”，添加标签。 为作业添加标签
注册一个华为账号并进行实名认证，认证后需要为账号进行充值。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。 购买AstroCanvas实例 在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，
创建的“多数据流1”。 图4 添加一个数据输入节点 图5 添加多数据流1后效果 再从数据输入中，拖拽一个数据输入节点到右侧画布中，数据集选择已创建的“多数据流2”。 图6 再添加一个数据输入节点 选中转换器，“联合方式”选择“转换器”，并新增一个转换器。 您也可以将“联合方式”设
在页面编辑模式下，选中所需的组件，单击右键选择“创建分组”。 分组创建后，选择“图层”，可查看到已创建的分组。 图1 查看分组 拖拽组件到已创建的分组中。 将鼠标放在已创建的分组上，单击右键选择“解除分组”，即可解除已创建的分组。 父主题： 组件管理
设置完成后，按F12，在“Console”页签，即可获取查看eventParam。 图5 eventParam data：保存最详细的动作信息对象。 图6 查看data $pageStore：保存页面中全局变量的对象。 如果在全局变量中，配置了一个field变量，并设置默认值为1。在自定义动
拖拽组件 在画布区域中，选中一个组件或多个组件（按住Ctrl键可选择多个组件），按住鼠标左键可进行拖拽。 拖拽组件 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在页面编辑模式下，选中一个或多个组件，按住鼠标左键拖拽到对应位置。 图1 拖拽组件 父主题：
字体颜色：设置下拉弹出框中字体的颜色。 选中态背景颜色：设置选中某项内容时，背景的颜色。 选中态字体颜色：设置选中某项内容时，字体的颜色。 鼠标悬浮时背景颜色：设置鼠标悬浮在某项内容上时，背景的颜色。 鼠标悬浮时字体颜色：设置鼠标悬浮在某项内容上时，字体的颜色。 数据 在数据中，设置下拉选择框组件的数据来源，更多介绍请参见数据接入。
在AstroCanvas中，如下两个场景会使用到页面版本： 场景一：开发者开发好第一个页面版本后，发布呈现给用户。然后继续开发页面但未开发完，此时用户看到的仍然是处于已发布状态的页面，即第一个版本，不会看到开发者未开发完的页面。 场景二：开发者开发某个大屏页面时，希望回退到历史某个页面版本，具体操作请参见如何进行版本回退。
参考使用空白画布新建页面中操作，新建一个空白页面。 在大屏开发页面，从“全部组件 > 装饰”中拖拽“自定义背景框”组件到画布中，并调整大小。 图1 拖拽自定义背景框到画布中 从“全部组件 > 导航”中拖拽“选项卡”组件到“自定义背景框”中。 图2 拖拽选项卡到自定义背景框组件中 增加选项卡组件的选项卡数量，并设置选项卡名称。
约束与限制 在B环境导入项目时，如果当前环境中不包含同名的数据源，会从项目包中安装数据源。新安装的数据源密码是空的，请在数据源中重新配置密码，也可以在项目页面的“数据”页签，单击，重新配置。 安装项目 在A环境AstroCanvas界面的“项目列表”页签中，鼠标悬浮在待下载的项目上，单击。
组件模板”。 表1 组件模板列表 组件模板名称 功能 EchartsWidgetTemplate 基于Echarts实现的一个柱状图组件模板，包含基本配置项、单击系列的事件交互、数据对接等能力。 SelectWidgetTemplate 基于elmentUI和Vue2实现一个通用的下拉框组件
troCanvas在设计前期对分类也进行了分组，因此这个字段被扩展为双数组形式。一般默认情况下，直接在数组对象的第一个数组中配置即可。如果无配置，则所有属性展示在一个大的分类下。 classfication中的配置包含预置分类和自定义分类两种。 预置分类：主要是使用平台预置分类。
在前台对数据进行筛选 数据系列：数据系列是一个数组，通常包含多个系列，即通过一个或多个系列配置循环渲染。 图11 数据系列 在数据系列中，拖动某一个系列可以和其他系列组成一个层级，最多支持3层。 图12 新建层级 图13 新建图层 原数据名：原始数据中默认的系列名称，可通过设置“列名”，进行修改
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
