检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 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 父主题： 代码结构介绍
ge-zh的多语言信息，统一注册到独立的i18nVue实例中，供组件获取桩数据、获取默认配置、初始化组件统一使用。 建议实现。 initReaderVm render中抽取的独立逻辑，初始化运行态组件VM实例。在实例中获取数据并实现组件的核心渲染。 建议实现。 registerWidgetActionAndEvent
json为组件的国际化资源文件，用于配置多语言，目前支持的多语言包含中英文两种，相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中，在packageinfo.json中的配置示例如下： "i18n": [{ "name": "messages-en"
文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom"
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
描述信息。 authorName: ：组件的作者信息。 width：在绝对布局高级页面中，添加该组件时的默认宽度，单位为“px”，不填写默认为“200px”。 height：在绝对布局高级页面中，添加该组件时的默认高度，单位为“px”，不填写默认为“200px”。 i18n：指定
editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
分类的key及系统预置的图标。name值为预置类型时，tip和iconSrc非必填。name字段值应与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。 classfication示例
et}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN: '点击系列', en_US: 'Click Series' }); clickSeries对象中，“desc”是
{widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加载
belong: "configuration", 归属于classfication中哪一个分类。 config Array config: [] config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}
组件设置 操作场景 在组件设置中，查看并管理当前项目中已引用到的所有组件。 操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。
escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤，获取安全的绝对URL地址。 escapeHtml() 对HTML字符串进行转义，获取转义后的字符串供页面显示用，使用方式参考如下： /* * @param {*} text */
由用户自己决定将什么字段拖拽映射到什么字段。例如，将name字段映射到了“选项标签展示值”字段，即x中，将ranking字段映射到了“选项值”字段，即y中，将series字段映射到了“选项值”字段，即s中。 [{ "series": "降雨量", "name": "A市",
getUrlParam 用于获取查询字符串中的参数。 getLocalStorage 用于获取某个localStorage的值。 setLocalStorage 用于设置某个localStorage的值。 getCookie 用于获取某个cookie的值，使用方式参考如下： /* @param
响应动作，数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作
是否自动播放：打开页面后是否自动播放视频。 是否静音：播放视频时是否静音。静音后，在播放视频时无法调整音量。 数据 在数据中，设置FLV视频播放组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置FLV视频播放组件与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。 父主题：
保持原比例：选择是否保持原比例。 视频组件中，配置项的配置高于数据配置。 播放 自动播放：打开页面后是否自动播放视频。 循环播放：是否循环播放视频。 静音播放：播放视频时是否静音。静音后，在播放视频时无法调整音量。 控制条：选择是否开启视频控制条。 数据 在数据中，设置视频组件的数据来源，更多介绍请参见数据接入。
数据可视化大屏在智慧城市中扮演关键角色，可以实时展示城市交通流量、环境污染指数、能源消耗情况等数据，帮助城市管理者及时监测城市运行状况，进行智慧决策，提升城市运行效率和居民生活质量。 图1 S市智慧城市大脑 工业制造 在工业制造领域，数据可视化大屏可以展示生产线实时运行状态、设备故障警
设置实心圆饼图和下拉选择框之间的交互动作。 在作为触发器中，单击“+ 交互事件”，选择“当点击数据时”。 在响应动作中，单击“+ 响应动作”，选择“组件响应”。 在动作详情中，设置具体的响应动作。 本示例中，通过选择事件参数，来控制组件值的变化，即单击实心圆饼图中某个数据系列时，下拉选择框中的值随之改变。 图1 设置动作详情
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
