检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
如何自定义动作 操作场景 在配置组件交互时，可以通过编写代码实现自定义交互动作，从而实现对应的业务需求。 图1 自定义动作 自定义动作参数说明 在自定义动作中，支持直接使用的参数如下： eventParam：组件传递出的参数。 以日期选择器组件为例，介绍如何获取eventParam。
轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置水滴水位图组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置水滴水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。 父主题：
轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置三角形水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。 父主题： 图表
轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，支持单色、渐变色。 数据 在数据中，设置矩形水位图组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置矩形水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。 父主题：
电商促销季、节假日等，可提前购买包年/包月资源以应对高峰期的需求，避免资源紧张。 数据安全要求高：对于对数据安全性要求较高的业务，包年/包月计费模式可确保资源的持续使用，降低因资源欠费而导致的数据安全风险。 适用计费项 AstroCanvas提供了“Astro大屏应用基础版”、“
自定义组件开发规范 代码结构介绍 组件配置项（Config配置） 组件内置API 组件数据接入 组件交互
钻石水位图 三角形水位图 圆角矩形水位图 矩形水位图 进度条 图标进度条 热力图 基本漏斗图 双向柱图 折柱图 水平基本柱图 水平堆叠柱图 数据标记柱图 瀑布柱图 基本柱图 散点图 气泡图 雷达图 父主题： 组件介绍
专业版 企业版 空间数 2个 5个 100个 页面数 20页 40页 500页 存储容量 5G 10G 100G 加密分享 支持 支持 支持 数据接入 支持 支持 支持 项目管理 支持 支持 支持 图表组件 支持 支持 支持 地图组件 支持 支持 支持 自定义组件 不支持 支持 支持
提高大屏数据及用户信息的安全性。 设置内容安全策略：大屏页面嵌入第三方系统时（例如以iframe形式嵌入），如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。
组件间交互 操作场景 组件间交互是指在同一页面中，不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器，根据用户所定义的事件不同，可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中，添加多个组件，使用tab来切换不同tab页签下需要呈现的组件为例，向您介绍如何设置组件间的交互能力。
多语言。例如，messages-zh.json为中文，messages-en.json为英文。 packageinfo.json：组件的元数据描述文件。 {widget}.css：组件的样式文件，在该文件中编写组件的CSS样式。 {widget}.editor.js：组件核心渲染
保账户余额充足。关于计费模式的详细介绍，请参见计费模式。 计费项 AstroCanvas服务的计费项由空间数、页面数、存储容量、加密分享、数据接入、项目管理和图表组件等组成。关于计费项的详细介绍，请参见计费项。 续费 包年/包月AstroCanvas到期后，会影响AstroCan
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
配置-自定义 configuration 组件级的配置项建议放到该分类中，如背景、标题等。 series 图形-自定义 series 图表的系列数据配置。 legend 图例-自定义 legend 图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。
置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件内统一从itemVal获取数据。select组件的内部处理API如上面代码。 inReader 判断当前页面状态是开发态或预览态，使用方式参考如下： if (!Studio
上传自定义组件 将自定义组件上传到AstroCanvas中，并在页面中使用。 操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”，进入我的资产页面。 在左侧导航栏中，选择“我的组件”，单击“添加组件”，进入添加组件页面。
el的情况下可以通过输入数字控制label的宽度（单位为px）。 tip Object 否 tip: { zh_CN: "当前排行榜展示的数据行数", en_US: "Number of data rows displayed in the current ranking page
组件自定义事件实现 组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
通用设置 操作场景 在通用设置中，可以设置网页图标、开启页面加载动画等功能。 操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。
健康检查设置 操作场景 健康检查设置中提供了页面健康度检查能力，对慢请求、错误请求、系统资源占用高等情况实时提示，有效帮助开发人员发现、定位和解决问题。 操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
