检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
构。如解压EchartsWidgetTemplate组件包，其目录结构如图2所示。 图2 Widget包目录结构 为了便于描述，对于名称不固定的手册，统一采用“{widget}”来命名。 i18n.json：组件的国际化资源文件，用于配置多语言。例如，messages-zh.json为中文，messages-en
这个数据因为键值名称并不是x、y和s，所以并不能渲染。此时需要一层映射，例如将name映射到x上，将ranking映射到y上，将series映射到s上。但是每次这个映射都不固定，需要交给用户自行配置，所以提出了映射的概念，即mapping。 图2 映射 由用户自己决定将什么字段拖拽映射到什么字段。例如，将name
组件配置项说明 字段 类型 示例 说明 migrateFrom String migrateFrom: "advancedSettings" 固定写法，配置后非华为云Astro大屏应用平台右侧属性面板会过滤掉配置项。 headerTitle Object headerTitle: {
图层透明度：统一设置图层的透明度。 图层：单击“新增图层”，可新建图标图层、标签图层、柱状图层、飞线图层、基础热力图层和区域热力图层。 图9 新建图标图层 基本配置 类型：固定为“图标图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。
及时充值。关于欠费的详细介绍，请参见10-欠费说明。 停止计费 当华为云Astro大屏应用资源不再使用时，可以将其退订或删除，从而避免继续收费，详细介绍请参见停止计费。 产品定价 如果您需要快速了解华为云Astro大屏应用服务的具体价格，请参见华为云Astro大屏应用价格详情。
业务大屏”中的，选择“开始创建”，进入创建华为云Astro大屏应用项目页面。 方式二：从运行环境登录华为云Astro大屏应用界面 运行环境是指应用正式发布上线的真实环境，默认域名为“appcuberun.cn-north-4.huaweicloud.com”。测试完成后，将应用发布至生产环境，即运行环境，供业务用户使用。
组件销毁前的回调函数，组件自己实现继承。 init 组件初始化入口API，以SelectWidgetTemplate组件为例，初始化组件通用能力，负责注册组件事件和组件动作。主逻辑建议如下： init() { this._super.apply(this, arguments);
Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN:
"English Label" } 配置项的标签，需要国际化。 listFixed Boolean 否 listFixed: true 列表个数固定，不展示新增、删除功能，默认为true展示。 labelOnce Boolean 否 labelOnce: true 仅在list首项展示一次label。
模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。 是 render(生命周期函数) 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。 是 beforeDestroy(生命周期函数)
快捷时间：是否显示快捷时间，默认为“显示”。“选择器类型”设置为“时间范围”时，才显示该参数。 图5 显示快捷时间效果 值类型：支持实时和固定时间两种类型。选择实时，快捷时间为now形式，如图6。 图6 值类型为实时 快捷时间字体颜色：设置快捷时间的字体颜色。 选中字体颜色：设置选中快捷时间时，快捷时间字体的颜色。
标签圆角：设置标签圆角的大小，“0”为直角。 图5 标签圆角 标签间距：设置标签之间的距离，默认为“0”。 标签内边距：设置标签和组件边框之间的距离，默认为“自适应”。设置为“固定值”时，可自定义内边距大小。 图6 标签内边距 默认文字：选项卡没启用，处于默认状态下的文字字体、文字粗细、文字大小、文字颜色。 激活文字
响应动作。本章节将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例
registerConnector：用来定义桥接器。 Studio.registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下： thisObj：当前组件实例对象，指为该组件注册事件。 eventName：事件名称，应该与触发事件API中的第一个参数保持一致。
图标选中色：设置选中后台排序、后台筛选时，图标的显示颜色。 图9 选中后图标颜色 列自适应：开启后，表格中的列会根据内容自适应。 固定列：设置首列和尾列的样式。当开启“列自适应”后，不支持设置固定列样式。 后台排序：是否开启后台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序
{ if (cbk) { this._super(); cbk(); } }, }); // 注册组件，必填 window.Studio.registerWidget('EchartsWidgetTemplate', 'EchartsWidgetTemplate'
图高占比(%)：“显示方式”设置为“图片”时显示该参数，设置图形的高度占比。 最大分值：“显示方式”设置为“评星”时显示该参数，设置5颗星的最大分值 。 评星固定为五颗星，当数据的最大值不等于5时，需填写数据的最大分值。 显示星数=实际数值/评分最大分值x5颗星。 当数据超过最大值的时候，显示5颗星。
data中。 fields[0].desc 变量的中英文描述，可选配置。 在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。 示例代码如下： var global_SelectWidget = StudioWidgetWrapper
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
