检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
设置组件数据源。 选中组件，单击组件上方的。 选择所需的数据类型。 在全局变量配置下方，单击，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7
负责组件的实例化和数据调用，以及事件和动作的实际实现。 /** * 组件核心渲染api，负责组件的实例化、数据调用及事件、动作的实际实现 */ render() { const widgetContainer = this.getContainer();
击查找到的结果，进入AstroZero服务控制台。 在主页中，单击“进入首页”，进入AstroZero应用开发页面。 单击主页中的“业务大屏”，或者左侧导航栏中的“业务大屏”，进入业务大屏界面。 图1 单击业务大屏 单击待导出项目上的，进入项目发布页面。 将鼠标放在对应的版本上，单击。
在动作实现中，输入如下代码，调用echarts提供的动作API。 echartsInst.dispatchAction({ type: 'highlight', dataIndex: params.dataIndex, }); 单击“新增参数”，设置参数名称为“dataIndex”。 图2
器请求参数的值。 无身份验证：不需要任何验证信息，直接调用接口，通常用于访问一些公开的接口。 AK/SK：通过访问密钥进行接口鉴权。访问密钥即AK/SK（Access Key ID/Secret Access Key），是您访问系统的身份凭证，系统通过AK识别访问用户的身份，通过
nvas界面。 在主菜单中，选中“我的资产”。 在左侧导航栏中，选择“我的库”，单击“添加库”。 单击，选择待上传的库，并设置库的基本信息。 图2 上传自定义库 库名字：库的名称。 操作类型：当前操作的类型，如新增、更新等。 库ID：上传库的ID，由字母及数字组成，且必须以字母开头。
elem)[0], }), getContainer是页面上组件的父容器，具有唯一标识。组件内操作dom的场景必须都加上这个父容器，如上面的代码。 getWidgetBasePath 获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源，无入参，使用方式参考如下： var widgetBasePath
组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。 是 beforeDestroy(生命周期函数) 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁。 是 initContainer render中抽取的独立逻辑，初始化
css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom" class="echarts-container"></div> </div>
视图切换 操作场景 通过视图切换功能，可将页面中的组件切换为列表或卡片样式。 列表：展示了所有组件的icon和标题，方便组件的快速查找。 卡片：展示了组件的初始化样式和标题，方便组件的预览和图层位置的调整。 切换图层 参考创建页面中操作，创建所需的页面。 选择“图层”，进入图层页面。 当
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 提示（悬浮提示）主要用于展示可视化图表组件，在具体维度节点的具体指标展示。 指标是指可视化组件中，对除可视化图形之外的具体补充
如何基于页面级的全局变量实现组件交互中实现的场景是：用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。
筛选组件 在图层中，支持按组件名称、组件标题和组件类型进行筛选，帮助您更加高效的选择所需要的组件。 筛选组件 参考创建页面中操作，创建所需的页面。 选择“图层”，进入图层页面。 在图层中，单击，筛选组件。 图1 筛选组件 父主题： 图层管理
选中基本折线图组件，单击组件上方的，设置组件标题“内容”为“告警平均处理时长统计”。 图9 设置组件标题 选中基本折线图组件，单击组件上方的，打开Y轴轴线“显示”开关。 图10 轴线显示 单击页面上方的，保存后单击，选择不同手机型号查看页面在移动端上的显示效果。 图11 查看预览效果
助您更加合理有效的排列大屏上的组件。 位置层次越靠前，表示组件在画布中的显示越靠前。 位置层次越靠后，表示组件在画布中的显示越靠后。 当两个组件重叠时，位置靠前的组件会覆盖位置靠后的。 在画布中移动 参考创建页面中操作，创建所需的页面。 在设计页面，选中待移动的组件。 单击右键，
选中多个组件后，单击右侧配置面板的对齐或分布图标。支持左、水平居中、右、顶、垂直居中、底等多种对齐方式，以及水平和垂直的自动分布方式。 组件对齐 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在页面编辑模式下，选择所需的组件，单击下图红框中图标，进行组件对齐。
“数据类型”选中“数据集”，并选择所需的数据集。 在全局变量配置中，绑定8中的全局变量，并给全局变量赋值。 图5 绑定全局变量 在组件预览中，从“表格字段”中拖拽对应的字段到“配置”中，并单击“保存”。 返回大屏设计页面，单击后，单击。 在预览页面，单击折线图堆叠图表中的系列，页面的全局变量将被设置为参数seriesIndex的值。
'只聚焦当前高亮的数据的图形', en_US: 'Self' }, value: 'self', }, { label: { zh_CN: '聚焦当前高亮的数据所在的系列的所有图形'
通用配置示例如下，以global_SelectWidget组件为例，设置后效果如图1所示。本示例中的global_SelectWidget为AstroCanvas系统预置的下拉框组件，可在“我的资产 > 我的组件”中获取。 { type: 'tab', name: 'multiple',
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
