检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
检查。您也可以根据业务需求，自定义健康检查项。 全选：选中所有的健康检查项。 展示页面加载进度条：勾选后，页面顶部会出现页面加载进度条。 开启浏览器内存使用率异常提醒：勾选后，如果浏览器内存使用率超过70%，页面右下角会弹框提醒。 开启资源访问耗时过长提醒：勾选后，如果单个资源访问耗时超过1秒，页面右下角会弹框提醒。
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
柱条边框圆角：设置柱条的边框圆角。 进度条宽度：设置进度条的宽度。 显示数值：进度条上是否显示数值。 显示占比：进度条上是否显示占比。 小数点位数：进度条上显示的数值小数点位数。 数据系列 颜色类型：可设置为“单色”或“渐变色”，选择颜色可改变柱状条的颜色。 进度条宽度：进度条的宽度，默认为10px。
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
地环境与公共环境，实现实时在线调测组件。 单击“检查更新”，检查组件是否有版本更新，如果有新版本组件，请单击“升级所有插件”。 您也可以单击待升级插件后的，对组件进行升级。 单击“启用模拟数据”，对项目中的组件数据来源进行统一控制。 在页面中，组件数据可来自模拟数据或访问业务接口
产品规格差异 华为云Astro大屏应用提供了“华为云Astro大屏应用基础版”、“华为云Astro大屏应用专业版”和“华为云Astro大屏应用企业版”三种实例套餐，各套餐的功能说明如表1所示，具体计费详情请参见AstroCanvas产品价格详情。 华为云Astro大屏应用基础版：
getWidgetBasePath 获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源。 getMessages 获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用。 hideWidget 隐藏组件。 showWidget 显示组件。 triggerEvent
css 组件的样式文件，在该文件中编写组件的CSS样式。 EchartsWidgetTemplate.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件。 widegtApi
变更套餐版本 背景信息 在购买华为云Astro大屏应用后，如果发现当前规格套餐无法满足业务需求，您可以变更套餐规格。当需要变更到高规格套餐时，需补齐版本差价，剩余服务周期按照剩余天数（不含闰年的2.29号）/365 进行计算（变更当天不算） ，续费时按照变更后的版本进行续费。 升级版本费用
字体：设置完成数据标题的字体、大小和颜色等。 进度条配置 进度条样式：设置进度条的样式，如圆角矩形、矩形。 进度条宽度：设置进度条的宽度。 进度条颜色：设置进度条当前进度的颜色。 进度条背景色：设置进度条的背景颜色。 图标进度条：是否显示进度条图标。 图标样式：自定义图标样式。建议选
使用页面模板文件新建页面 使用页面模板文件，构建开发页面，减少重复开发，提高交付效率。创建移动端页面操作和大屏&PC端页面相同，本章节以创建大屏&PC端页面为例进行介绍。 前提条件 已获取对应的页面模板文件，详情请参见下载当前页面。 通过页面模板文件新建页面 参考登录华为云Ast
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在华为云Astro大屏应用中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
渐变色饼图 基本折线图 多折线图 区域图 多区域折线图 水位图 箭头水位图 水滴水位图 钻石水位图 三角形水位图 圆角矩形水位图 矩形水位图 进度条 图标进度条 热力图 基本漏斗图 双向柱图 折柱图 水平基本柱图 水平堆叠柱图 数据标记柱图 瀑布柱图 基本柱图 散点图 气泡图 雷达图 父主题：
私有化部署升级指导 华为云Astro大屏应用运行环境部署包存在多个版本，且新版本相对于之前的版本存在功能变动时，可按照本章节操作更新已部署的华为云Astro大屏应用。 更新已私有化部署的华为云Astro大屏应用有两种方式，一种是创建一个新目录部署一个全新的华为云Astro大屏应用
与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。 classfication示例 classfication配置示例如下，其对应效果如图1所示。 classfication:
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 华为云Astro大屏应用的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
"messages-en" // 组件的多语言文件,相应文件为messages-en.json }, { "name": "messages-zh" // 组件的多语言文件,相应文件为messages-zh.json } ], 文件示例 messages-zh.json配置示例
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
