检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在大屏设计页面，从“全部组件 > 其它”中，拖拽“按钮组件”组件至画布空白区域，如图1所示。 图1 按钮组件 配置 在配置中，设置按钮快捷样式和基础样式。 图2 按钮配置 快捷样式设置：设置按钮的样式，如常规按钮、强调按钮、文字按钮等。
图1 预置组件模板 在模板详情页，单击“下载”，将模板下载到本地。 认识Widget包目录结构 解压下载到本地的组件Widget包，认识组件结构。如解压EchartsWidgetTemplate组件包，其目录结构如图2所示。
图5 设置内容安全策略 开启“内容安全策略”时，如果在浏览器无痕模式下预览页面，请确保“阻止第三方Cookie”已关闭，否则无法正常预览页面。 图6 关闭阻止第三方Cookie 父主题： 页面管理
选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
图2 设置到期时间 父主题： 创建工作空间
图1 升级组件 单击“启用模拟数据”，对项目中的组件数据来源进行统一控制。 在页面中，组件数据可来自模拟数据或访问业务接口获取。通过是否开启“启用模拟数据”，可对项目中的组件数据来源进行统一控制。 在进行前台页面开发时，经常要通过桥接器动态调用后台的接口来获取后台数据。
图5 输入SQL语句 图6 输入“$”添加全局变量 在组件预览中，将表格中的字段，拖拽到对应的配置中。 数据中的total字段，必须添加到“数据总数”中。 图7 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。
例如，在如何基于页面级的全局变量实现组件交互开发的页面中，在“多区域折线图”组件上方单击，配置组件交互事件。参考图1，单击“+交互事件”，选择“点击”事件，单击“+响应动作”，选择“页面跳转”，跳转到内部其他页面，打开“设置页面参数”开关，设置参数。
选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
图9 全局变量 获取组件对象并操作组件 获取组件。 在“图层”页面，选中日期选择器组件。 图10 选中日期选择器组件 将鼠标悬浮在日期选择器上，组件名称即为组件ID。 图11 获取组件ID 操作组件。
图3 适应方式 背景 设置页面的背景图片或者颜色。选择图片作为背景时，支持使用系统预置的图片或上传本地的图片作为背景。 图4 设置背景颜色 图5 选择背景图片 封面 设置大屏、移动端页面的封面，支持截取当前页面为封面或上传本地的图片作为封面。 图6 设置封面 父主题： 页面管理
图1 新建移动端项目 系统自动进入该新建项目的“移动端项目”页面，如图2。 图2 移动端项目页面 （可选）项目创建后，可参考项目管理中内容，对项目进行设置。 创建文件夹 项目创建后，支持在项目中创建文件夹，用于集中管理页面。 在“移动端项目”页面，单击“所有页面”后的“...”
选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
图8 配置组件交互事件 在页面中拖入并设置多区域折线图组件。 从左侧全部组件中，搜索并拖拽“多区域折线图”，到下拉选择框组件下方。 设置组件标题为“告警分布情况”。 图9 设置组件标题 在组件上方单击，配置组件数据。
图3 上传素材 选择素材待添加到的目录，单击“确定”。 支持将素材添加到已有目录，或新的目录中。 在大屏设计页面，使用已上传的图片。 从“全部组件 > 媒体”中，选择“图片”组件拖入画布中。 单击“卡片”图标，在“背景”中，单击“选择图片”，从素材库中选择素材。
图1 新建项目 系统自动进入该新建项目的“大屏&PC端项目”页面，如图2。 图2 大屏&PC端项目页面 （可选）项目创建后，可参考项目管理中内容，对项目进行设置。 新建文件夹 项目创建后，支持在项目中新建文件夹，用于集中管理页面。
图1 数据源信息 getConnectorInstanceByName 通过Connector名称获取Connector实例，再通过process方法调用接口获得数据。
AstroCanvas当前支持如下几种类型的数据集，其与数据源、转换器和目录之间的关系，如图1所示。 图1 数据源、数据集、转换器、目录之间的关系图
下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts，请提前了解。 图1 最终呈现效果 开发自定义组件 下载图表模板。
图3 设置动作详情 保存交互设置，预览页面，echarts组件渲染首个数据获得高亮效果。 图4 查看渲染效果 父主题： 组件管理
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
