检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。 coordinate 坐标轴-自定义 coordinate 图表的X、Y坐标轴配置。 referenceLine 参考线-自定义 referenceLine 图表的X、Y轴参考线配置。 metrics
{widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加
'Series Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', {
config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
作列表中展现。 inReader 判断当前页面状态是开发态或预览态。 registerWidget 必须在{widget}.editor.js中注册组件，使用方式参考如下： /* @param {string} widgetName * @param {string} description
json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。 { "js": [ {
配置项总览 本章节介绍AstroCanvas支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
css，EchartsWidgetTemplate.editor.js修改为BarGraph.editor.js，EchartsWidgetTemplate.ftl修改为BarGraph.ftl，EchartsWidgetTemplate.js修改为BarGraph.js。 图3 修改后效果 进入重名后的BarGraph
sendSelect 自定义的事件名为“sendSelect”，必须配置。 须知： 需要在组件“.js”文件逻辑代码中，使用“Studio.registerEvents()”方法注册该事件，并使用“thisObj.triggerEvent()”方法触发该事件。 desc 事件的中英文描
注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect:
贴”。 图1 复制并粘贴组件 您也可以在“图层”中，将鼠标悬浮在组件上，单击“复制并粘贴”。 图2 在图层中复制并粘贴组件 父主题： 组件管理
（可选）双击对应的表，右侧会显示对应的查询语句，单击“设置”，添加标签。 为作业添加标签后，在AstroCanvas中可通过标签识别到是具体哪个作业的执行结果。如果不设置标签，默认识别到最新作业的执行结果。 图2 设置标签 单击“执行”，构建数据。 图3 构建数据 在左侧导航栏中，选择“作业管理
可以只显示其中的某一个或两个。 坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 X轴 X轴：是否显示X轴。 X轴坐标轴类型：设置X轴坐标轴类型，支持连续数据、类目轴和时间轴。 坐标轴分割段数：设置X轴坐标轴段数。 最大值：X轴标签能显示的最大值。
名和数据值，也可以只显示其中的某一个或两个。 坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 基本信息 半径：设置图表的半径。 横坐标(%)：设置图表的横坐标。 纵坐标(%)：设置图表的纵坐标。 绘制类型：设置图表绘制类型，支持多边形和圆形。
快捷样式设置：设置按钮的样式，如常规按钮、强调按钮、文字按钮等。 基础样式设置 按钮：按钮状态，分为启用和禁用。 内容：按钮显示文字，如保存。 默认文字：按钮显示文字的字体、文字粗细、文字大小、文字颜色。 默认背景色：处于默认状态下的背景色。 悬浮文字颜色：鼠标悬浮在按钮上时，按钮显示文字的颜色。 悬浮背景色：鼠标悬浮在按钮上时，按钮的背景色。
可以只显示其中的某一个或两个。 坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 x轴 X轴：是否显示X轴。 X轴坐标轴类型：设置X轴坐标轴类型，支持连续数据、类目轴和时间轴。 坐标轴分割段数：设置X轴坐标轴段数。 最大值：X轴线标签数据的最大值。
特征标记：提示框显示的内容，可以显示系列名、数据名和数据值，也可以只显示其中的某一个或两个。 坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小等设置。 标题偏移：标题相对于轴线的偏移。 轴线：是否显示轴线，支持设置轴线颜色。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
