检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
复选框 复选框是文本组件的一种，用于选择一个或多个选项。 在大屏设计页面，从“全部组件 > 文本”中，拖拽“复选框”组件至画布空白区域，如图1。 图1 复选框 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
仪表盘 仪表盘是指通过仪表的特殊展示方式，对数据进行展示。 在大屏设计页面，从“全部组件 > 仪表盘”中，拖拽“仪表盘”组件至画布空白区域，如图1。 图1 仪表盘 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
时间轴 时间轴是文本组件的一种，用于按时间顺序来展示了一系列事件。 在大屏设计页面，从“全部组件 > 文本”中，拖拽“时间轴”组件至画布空白区域，如图1。 图1 时间轴 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
下拉选择框是文本组件的一种，用于在下拉框中选择某一项内容，由一个输入框和一个下拉弹出框组成。 在大屏设计页面，从“全部组件 > 文本”中，拖拽“下拉选择框”组件至画布空白区域，如图1。 图1 下拉选择框 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡
FLV视频播放 FLV视频播放是媒体组件的一种，用于播放FLV（Flash Video）格式的视频。 在大屏设计页面，从“全部组件 > 媒体”中，拖拽“FLV视频播放”组件至画布空白区域，如图1。 图1 FLV视频播放 图2 边距样式说明 卡片 卡片是指包裹媒体组件的外层架构，可以理解为
分割线是装饰组件的一种，用于分割组件，起装饰作用，包括分割线和竖分割线。 以分割线16-1为例，在大屏设计页面，从“全部组件 > 装饰”中，拖拽“分割线16-1”组件至画布空白区域，如图1。 图1 分割线16-1 页面背景色设置为白色时，分割线组件很难显示出来。使用该组件时，请避免使用白色背景。
视频流是媒体组件的一种，主要用于对接监控视频流，在可视化应用中主要应用于监控场景需求，对接监控视频展示场景。 在大屏设计页面，从“全部组件 > 媒体”中，拖拽“视频流”组件至画布空白区域，如图1。 图1 视频流 图2 边距样式说明 卡片 卡片是指包裹媒体组件的外层架构，可以理解为组件由卡片中基础
eventParam：组件传递出的参数。 以日期选择器组件为例，介绍如何获取eventParam。 在页面中，拖入一个日期选择器组件到画布中。 图2 拖拽日期选择器到画布中 选中日期选择器，单击，进入交互设置页面。 按照下图，设置自定义动作。 图3 设置自定义动作 /* * 可以像示例这样获取到组件对象，然后编写js代码
视频 视频是媒体组件的一种，用于播放MP4、OGG、MOV、WEBM格式的视频。 在大屏设计页面，从“全部组件 > 媒体”中，拖拽“视频”组件至画布空白区域，如图1。 图1 视频 图2 边距样式说明 卡片 卡片是指包裹媒体组件的外层架构，可以理解为组件由卡片中基础元素（卡片背景、特效、卡片边框）和视频元素构成。
次获取的数据。 图5 输入SQL语句 图6 输入“$”添加全局变量 在组件预览中，将表格中的字段，拖拽到对应的配置中。 数据中的total字段，必须添加到“数据总数”中。 图7 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图8 查看后台分页效果
行查找。 图1 搜索所需组件 图2 按照分类查找 按住鼠标左键，将目标组件拖拽到画布中。 图3 拖拽组件到画布中 组件添加成功后，会自动展示在画布中。您可以通过拖拽组件边框，调整组件的大小，也可以参考拖拽组件中操作，调整组件的位置。 父主题： 组件管理
Token认证”必须设置其中一个，否则链接在运行态无法正常访问。 图1 获取发布链接（已有项目） 图2 获取发布链接（新建项目） 单击，可生成新的链接，原链接将不可访问。单击，可复制该链接。 版本管理：只能查看页面的版本和编辑版本的描述信息。 分享码设置：设置页面分享码和分享码有
参考使用空白画布新建页面中操作，新建一个空白页面。 在大屏开发页面，从“全部组件 > 装饰”中拖拽“自定义背景框”组件到画布中，并调整大小。 图1 拖拽自定义背景框到画布中 从“全部组件 > 导航”中拖拽“选项卡”组件到“自定义背景框”中。 图2 拖拽选项卡到自定义背景框组件中 增加选项卡组件的选项卡数量，并设置选项卡名称。
可视化开发页面 表1 可视化开发页面功能说明 序号 名称 说明 1 组件 在全部组件中，可以查看到各种类型的组件（包括预置组件和自定义组件），将组件拖拽到画布中进行配置，完成可视化应用项目的开发。更多关于组件的介绍，请参见组件介绍。 2 图层 在图层列表中，可以查看到画布中各个组件的图层位
击，发布项目。 在版本管理中，单击“+ 新建版本”。 设置版本号和版本描述（可选），勾选待发布的页面，选择页面版本，单击“确定”。 只有已生成发布链接的页面，才会显示在如图1所示页面中。您可以根据自身业务需求，选择发布一个或多个页面。 图1 新建版本 单击，设置项目当前发布版本。
发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts，请提前了解。 图1 最终呈现效果 操作步骤 下载图表模板。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
刷新数据：单击该按钮，可预览数据。 单击“保存”，完成数据集的创建。 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面，拖拽所需组件（如基本柱图）到画布中。 图3 拖拽基本柱图到画布中 选中该组件，单击组件上方的，进入组件数据页面。 在“数据类型”下拉框中，选择“数据集”，选择创建数据集中创建的数据集。
选择所需的数据类型。 在全局变量配置下方，单击，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台排序效果 父主题： AstroCanvas学堂
选择所需的数据类型。 在全局变量配置下方，单击，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台筛选效果 父主题： AstroCanvas学堂
在开发页面，从“组件 > 图表”中，拖拽基本柱图组件到画布中。 图10 拖拽基本柱图到画布中 选中组件，单击组件上方的，进入数据源设置页面。 “数据类型”选择“页面数据集”，选择创建页面数据集中创建的数据集。 图11 选择页面数据集 在组件预览中，拖拽表格中的字段到配置中，即可预览效果。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
