检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
数据接入的SQL语句中，需要添加4中创建的全局变量offset和pageSize，来限制每次获取的数据。 图5 输入SQL语句 图6 输入“$”添加全局变量 在组件预览中，将表格中的字段，拖拽到对应的配置中。 数据中的total字段，必须添加到“数据总数”中。 图7 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。
选择所需的数据类型。 在全局变量配置下方，单击“+”，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 从表格字段中拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台筛选效果 父主题： 组件管理
选择所需的数据类型。 在全局变量配置下方，单击“+”，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台排序效果 父主题： 组件管理
偶行背景色：设置偶数行数据的背景颜色。 溢出文本：设置表格中超长文本的显示样式，如显示为省略号、换行显示和滚动显示。 序列号：表格中序列号设置。 是否展示：表格中是否显示序列号。 序列号：设置序列号的名称。 列宽占比(%)：设置序列号在表格中的列宽占比。 对齐方式：设置序列号对齐方式，如水平居中、居左和居右。 背景色：设置序列号的背景颜色。
后台排序：是否开启后台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。后台排序的使用示例，请参见如何使用高级表格的后台排序功能。 图10 在后台对数据进行排序 后台筛选：是否开启后台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。后台筛选的
前台排序：是否开启前台排序功能（表格中指定的列）。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。 图6 在前台对数据进行排序 前台筛选：是否开启前台筛选功能（表格中指定的列）。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。 图7 在前台对数据进行筛选
对表格中的数据进行排序。“数据系列”设置为“开启”时，才会展示该配置。 图16 在前台对表格中数据进行排序 前台筛选：是否开启前台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。 图17 在前台对表格中数据进行筛选 列宽占比(%)：设置对应系列在图表中的占比。
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
在组件“.js”文件逻辑代码中，使用“thisObj.triggerEvent()”方法触发该事件时，要将变量字段传入发送的data中。 fields[0].desc 变量的中英文描述，可选配置。 在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。
fo.json，并在文件中写入如下内容： { "js": [ { "name": "d3js.org_d3.v4.min" } ] } 将脚本d3js.org_d3.v4.min.js和packageinfo
在全部组件中，拖拽一个实心圆饼图到画布中。 为实心圆饼图设置数据。 选中实心圆饼图，单击。 “数据类型”选中“数据集”，并选择所需的数据集。 在全局变量配置中，绑定8中的全局变量，并给全局变量赋值。 图5 绑定全局变量 在组件预览中，从“表格字段”中拖拽对应的字段到“配置”中，并单击“保存”。
{widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加
期对分类也进行了分组，因此这个字段被扩展为双数组形式。一般默认情况下，直接在数组对象的第一个数组中配置即可。如果无配置，则所有属性展示在一个大的分类下。 classfication中的配置包含预置分类和自定义分类两种。 预置分类：主要是使用平台预置分类。 自定义分类：支持平台预置分类和用户自定义分类。
创建分组 自定义组件说明 echarts组件自定义事件交互设置 echarts组件自定义动作交互设置 如何使用高级表格的后台分页功能 如何使用高级表格的后台排序功能 如何使用高级表格的后台筛选功能
组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下： { type:
dget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN: '点击系列', en_US: 'Click Series' }); clickSeries对象中，“desc
注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。 registerAction 用来注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。 inReader 判断当前页面状态是开发态或预览态。 registerWidget 必须在{widget}.editor.js中注册组件，使用方式参考如下：
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
归属于classfication中哪一个分类。 config Array config: [] config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
