华为云用户手册

批量复制自定义组件到工作空间 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的组件”。 选中多个组件，单击“复制到工作空间”。 您可以通过鼠标框选、“Ctrl+单击”、“Ctrl+A”或“Ctrl+Shift+框选”，来选择多个组件。 图19 复制多个组件到目标工作空间 在弹出的页面，选择目标工作空间，单击“确定”。

更新组件 更新组件前，请先获取锁，否则更新按钮置灰不可用。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的组件”。 将鼠标放在对应的组件上，单击，获取锁。 将鼠标放在对应的组件上，单击，进入更新组件页面。 图7 进入更新组件页面 在组件更新页面，上传新的组件、设置组件参数，单击“更新”。 图8 设置组件信息 将鼠标放在对应的组件上，单击，可查看到新版本的组件（如1.0.1）。 图9 查看组件版本 ：单击该图标，可下载当前版本组件。 ：单击该图标，可在线编辑该版本组件。

复制自定义组件到其他工作空间 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的组件”。 将鼠标放在待复制的组件上，单击。 图5 复制组件 在弹出的页面，选择目标工作空间，单击“确定”。 组件默认复制到目标工作空间的相同目录下，如果目录不存在，会自动创建该目录。 复制自定义组件到其他工作空间存在资产冲突时，会更新空间内原有的内容。

新建目录 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的组件”。 单击所有组件后的“...”，选择“新增目录”。 输入目录名称，单击“确定”。 目录名称长度为1~64个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 图1 设置目录名称 目录创建完成后，支持修改目录名称、删除目录，也可以在当前目录下创建子目录。 图2 管理目录

编辑组件 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的组件”。 将鼠标放在对应的组件上，单击。 图10 编辑组件 在组件编辑页面，单击右上角的，获取锁。 按需在线修改组件文件，单击。 在弹出的提示框中，单击“确定”。 在组件更新页面，按需设置组件参数（如修改组件名称为TabsWidget_Update），单击“更新”。 图11 更新组件 返回我的组件页面，可查看到组件名称变为TabsWidget_Update。 图12 查看新组件 在组件上，单击，可查看到新版本的组件（如1.0.2）。 图13 组件新版本

Echarts组件设置 在Echarts组件设置中，可以设置ECharts组件的初始化代码块、实例化代码块、自定义事件和自定义动作。 图4 代码设置 初始化代码块：初始化代码块输入框是一个javascript的执行环境，该执行环境的目的是调用echarts的init方法创建实例，此处可配置初始化相关的操作，包括echarts的主题等。 图5 初始化代码块 单击“参数说明”，可查看初始化代码块的参数说明。 单击，可复制初始化代码。 单击，可最大化初始化代码块页面。 实例化代码块：和初始化代码块类似，实例化代码块的目的是构造echarts setOption所需要的option对象（setOption对象平台会自动执行）。AstroCanvas提供了上百种echarts组件，本质上是不同的实例化代码，这些实例化代码来自echarts官网的demo代码，例如https://echarts.apache.org/examples/zh/editor.html?c=line-simple。如果这些demo不满足您的需求，还可以在echarts开源社区选择合适的demo。 在实例化代码块中，还可以实现异步加载和引入第三方库，详情请参见异步加载和引入第三方库。 图6 实例化代码块 单击“参数说明”，可查看实例化代码块的参数说明。 单击，可复制实例化代码。 单击，可最大化实例化代码块页面。 自定义事件：echarts组件支持自定义扩展事件和交互，来扩展组件在系统中的交互能力。单击“新增自定义事件”，可新增事件。在事件实现中，编辑事件实现的代码，为echarts实例或组件实例的某个动作回调绑定发送事件的方法triggerCurrentEvent。单击“新增字段”，可定义发送事件时携带的参数字段。如何为自定义事件添加交互，请参见echarts组件自定义事件交互设置。 图7 自定义事件 自定义动作：echarts组件支持自定义动作，来响应事件。单击“新增自定义动作”，可新增动作。在动作实现中，编写触发动作的执行逻辑。入参的echartsInst可以使用echarts的API，widgetInst可以使用AstroCanvas组件通用的API。单击“新增参数”，可以定义触发动作时入参字段。如何为自定义动作添加交互，请参见echarts组件自定义动作交互设置。

数据 在数据中，配置ECharts组件的数据来源，更多介绍请参见数据接入。 与其他组件不同的是，ECharts组件在数据配置流程中没有字段映射，而是直接改变实例化代码块的内容。 图12 设置ECharts图表组件数据源 将左侧表格字段拖拽到右侧配置中的代码块高亮处，如图13。如果简单的拖拽列方法无法满足需求，可以在代码中用“$data”获取数据配置结果，以javascript代码处理逻辑，如图14。 图13 拖拽字段 图14 通过“$data”实现

配置 在配置中，设置组件的全局样式、表头设置、行、系列号等。 图4 通用表格配置 全局样式 表格行数：当前页显示多少行数据。 背景色：设置表格的背景颜色。 轮播：表格是否轮播。设置为“是”时，支持设置单行是否停顿、轮播速度和单行停顿时间。 横向滚动：是否开启横向滚动。 行配置 奇行背景色：设置奇数行数据的背景颜色。 偶行背景色：设置偶数行数据的背景颜色。 溢出文本：设置表格中超长文本的显示样式，如显示为省略号、换行显示和滚动显示。 图5 溢出文本 序列号：表格中序列号设置。 是否展示：表格中是否显示序列号。 序列号：设置序列号的名称。 列宽占比(%)：设置序列号在表格中的列宽占比。 对齐方式：设置序列号对齐方式，如水平居中、居左和居右。 背景色：设置序列号的背景颜色。 半径：设置序列号的半径。 圆角：设置序列号圆角，0为直角。 字体：设置序列号的字体、大小和颜色等。 分页 是否启动：表格是否分页显示，分页模式下轮播无效。 行高：设置分页的行高，单位px。 单页数量：设置每页显示数据条数，以“,”隔开。 文本位置：设置分页文本显示位置，支持靠左、靠右和居中显示。 背景色：设置分页背景颜色。 字体：设置分页的字体、大小和颜色等。 选中字体颜色：设置选中分页时文本的颜色。 分页框宽度：设置分页框的宽度，单位为px。 下拉框背景颜色：设置下拉框的背景颜色。 下拉框字体颜色：设置下拉框的字体颜色。 下拉框选中态背景颜色：设置下拉框选中态的背景颜色。 下拉框选中态字体颜色：设置下拉框选中态的字体颜色。 下拉框鼠标悬浮时背景颜色：设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色：设置下拉框鼠标悬浮时的字体颜色。 树状表格 懒加载：开启懒加载，必须配置全局变量和交互事件。 展开层级：设置树状表格展开层级。 新增条件格式：单击“新增条件格式”，可增加条件格式。 例如，该组件预置的静态数据如图6所示。期望“series”为“白名单”的“amount”数值标红，参考图7，单击组件上方图标，单击“+ 新增条件格式”，设置条件和响应数据列的样式。 图6 预置数据 图7 新增条件格式

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 通用表格图形 统一配置 表头行高占比(%)：设置表头的行高占比。 背景色：设置表头背景色。 对齐方式：设置表头对齐方式。 表头字体：设置表头的字体、大小和颜色等。 内容字体：设置表格内容的字体、大小和颜色等。 开启表头换行：是否开启表头换行。 排序：是否开启表头排序。开启后，单击图标，可对表头进行排序。 图9 开启表头排序 数据系列 列数据键值：原始数据中默认的系列名称，可通过设置“列名”，进行修改。文字内容来源于数据模型的取值。 列名：自定义图表中数据系列的显示名称。 列宽占比：设置该数据系列的列宽占比。 背景色：设置该数据系列的背景色。 对齐方式：设置该数据系列中数据的对齐方式，如水平居中、左侧等。 字体：设置数据系列中数据的字体、颜色和大小等。 表头字体：设置表头的字体、颜色和大小等。 排序：是否开启排序功能，开启后支持设置图标背景颜色、悬浮时的背景颜色和选中时的背景颜色等。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 通用表格卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。 标题设置 是否展示：是否显示组件标题。 标题内容：输入标题内容。 标题行高度：设置标题的行高，单位px。 背景色：设置标题背景色。 文本位置：设置标题中文本位置，支持居中、靠左、靠右或自定义。 字体：设置标题的字体、大小和颜色等。

页面数据来源介绍 组件是大屏应用页面的组成元素，配置页面数据即为配置组件数据。AstroCanvas中，页面组件的数据来源包括非数据源（包括桥接器预置、静态数据和数据集等）和数据源（包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等）。选中组件，单击组件上方的，即可配置组件在页面呈现数据的来源。 图1 为组件配置数据 非数据源 桥接器预置 通过桥接器动态调用后台的接口，来获取后台数据展示在页面上，相关配置请参见桥接器预置。 静态数据 选择该方式时，页面会获取“输入数据”中的静态数据展示在页面上，详情请参见静态数据。 AstroCanvas已预置了静态数据，如果需要自定义静态数据，请重置数据。 数据集 选择在“数据中心”中配置的数据集，作为组件数据来源。选择此方式时，请确保数据集已在数据中心创建，详情请参见数据中心。 不是所有的组件都支持数据源设置，组件开发时的属性配置代码中添加“dataSetting”相关配置时，才支持数据源设置。例如“基本柱图”组件的“BarChart_Widget.editor.js”中定义代码如下： propertiesConfig: [ { config: [ { "type": "connectorV2", "name": "BarOrLineChartDataConnector", "label": "BarOrLineChartDataConnector", "model": "SingleRepireDataViewModel", "value": "" }, { "type": "dataSetting", "mapping": { "x": { "type": "category", "label": "x", "required": true }, "y": { "type": "value", "label": "y", "required": true }, "s": { "label": "s", "series": [ { "type": "", "label": "", "required": false } ] } }, "mock": {}, "model": "SingleRepireDataViewModel" } ] } ], 页面数据集：通过页面数据集，可实现多个组件对接同一个数据输入，从而减少重复的请求和配置。更多介绍，请参见页面数据集。 数据源 支持直接从数据源（关系型数据库、Roma连接器、 DLI 和DWS等），获取数据来展示在页面上。更多介绍，请参见其他数据源。 父主题： 数据接入

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 数据标记柱图图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小等。 左间距：图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到柱图组件顶部距离占组件高度。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：是否开启自定义图例显示设置。开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

参考线 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。 图11 数据标记柱图参考线 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。 Y轴参考线 Y轴参考线：是否显示Y轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增Y轴参考线”，可新增参考线。单击对应参考线后的“x”，可删除参考线。 X轴参考线 X轴参考线：是否显示X轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增X轴参考线”，可新增参考线。单击对应参考线后的“x”，可删除参考线。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图10 数据标记柱图坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签行为：标签字数过多时是否进行处理，包括字数过多是否换行、字数过多是否省略。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小等设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小等设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 轴最大值：是否设置轴最大值，支持直接输入阈值。 反转：是否对轴数据进行反转。 柱间阴影：柱间是否显示阴影，支持自定义阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图12 数据标记柱图指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小、颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 数据标记柱图图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。

config配置示例 config配置示例如下，设置后效果如图1所示。 { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: '数据映射', en_US: 'Data Mapping' }, belong: 'configuration', config: [ { type: 'select', name: 'commonProps.emphasisFocus', label: { zh_CN: '高亮时淡出', en_US: 'Emphasis Focus' }, value: 'series', options: [ { label: { zh_CN: '不淡出其它图形', en_US: 'None' }, value: 'none', }, { label: { zh_CN: '只聚焦当前高亮的数据的图形', en_US: 'Self' }, value: 'self', }, { label: { zh_CN: '聚焦当前高亮的数据所在的系列的所有图形', en_US: 'Series' }, value: 'series', }, ], }, { type: 'tab', name: 'commonProps.showLabel', label: { zh_CN: '显示标签', en_US: 'Emphasis Focus' }, value: true, options: [ { label: { zh_CN: '显示', en_US: 'Show' }, value: true, }, { label: { zh_CN: '隐藏', en_US: 'Hide' }, value: false, }, ], }, ], }, 图1 设置后效果

其他数据源 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在编辑页面状态下，选中组件，单击组件上方的。 图1 在基本饼图上方单击数据 在数据类型中，选择“AstroZero API”，在右侧单击“+ 新建数据源”。 配置数据源参数。 图2 新建数据源 数据源名称：新建数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字和下划线，且不能以下划线开头或结尾。 域名 ：AstroZero环境的域名，需要携带“https://”。 客户端ID：调用AstroZero接口前，需要配置“客户端模式”OAuth鉴权的客户端ID。OAuth认证过程中，新建认证密钥时授权类型需选择“客户端模式”，用户建议选择具有管理员权限（System Administrator Profile）的用户。如何获取client_id，请参见客户端模式接入认证。 客户端密码：调用AstroZero接口前，需要配置“客户端模式”OAuth鉴权的客户端鉴权密钥。如何获取client_secret，请参见客户端模式接入认证。 描述：新建数据源的描述信息，可按需进行设置。 单击“连接测试”，显示“连接成功”，表示数据源可以调通。 单击“保存”，完成数据源的创建。 在左侧选择“配置流程”节点，在右侧配置相关参数。 应用：选择调用自定义接口所属的应用。 API接口：选择待调用的API接口，下拉框中的选项取值为接口的标签，如果接口标签取值为中文，则这里“API接口”显示为中文标签。如果接口标签未定义，则显示接口的操作名称。 请求类型：API接口的请求类型，系统会自动填入。 参数：接口入参，当有入参时，系统会自动展示。 当接口有入参时，单击参数后的“设置全局变量”，可设置变量的默认值。 测试API接口：用于测试该接口，单击“测试API接口”，“样例报文”中会显示输出结果。 样例报文：对应API接口的响应样例报文数据格式，元数据结构由该样例报文经转换器处理后的数据结构确定。单击“格式化”，可对样例报文进行格式化处理。 转换器：选择转换器，用于对数据进行转换处理。 数据预览：单击“数据预览”，在右侧可直观展示经过转换器处理后的样例报文。 在左侧流程图中单击“+”，可根据需要添加其他节点，如过滤、排序、限制行数等。 设置完成后，单击“保存”。

新建HTTP连接器数据源 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“HTTP连接器”，配置数据源参数。 图1 新建HTTP连接器数据源 数据源名称：数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 HTTP连接器：选择前提条件中已创建的HTTP连接器。 接口鉴权方式：自动关联已创建连接器的鉴权方式。 描述：新建数据源的描述信息。 设置完成后，单击“保存”。

添加组件 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在页面编辑模式下，按照组件分类，查找到对应组件。 您也可以在搜索框中，输入所需的组件（如图1），或者按照图2进行查找。 图1 搜索所需组件 图2 按照分类查找 按住鼠标左键，将目标组件拖拽到画布中。 图3 拖拽文本编辑组件到画布中 组件添加成功后，会自动展示在画布中。您可以通过拖拽组件边框，调整组件的大小，也可以参考拖拽组件中操作，调整组件的位置。

在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面，拖拽所需组件（如基本柱图）到画布中。 图4 拖拽基本柱图到右侧画布中 选中该组件，单击组件上方的，进入组件数据页面。 在“数据类型”下拉框中，选择“数据集”，选中创建数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量，用于控制组件之间参数的传递，从而达到交互的目的，例如图表联动、自定义字段等功能。静态数据不支持配置全局变量。 在组件预览中，选择要展示的表字段，即从左边栏中拖入到右边栏中，单击“保存”。 图5 拖拽字段到对应的坐标轴 表格字段：展示创建数据集中，录入的静态数据。 配置：从表格字段中，拖拽所需的字段到X轴数据、Y轴数据或系列中。 刷新周期：每隔多少秒获取一次静态数据，默认配置为“0”，表示只获取一次静态数据。 共享数据：是否共享数据。勾选后，如果多个组件调用了相同的静态数据请求，不会各自只调用，而是共享结果数据。 选中基本柱图组件，单击组件上方的，设置标题内容为“各市农作物产量统计”。 图6 设置图表标题 单击页面上方的，保存设置页面。 单击，进入预览页面，预览效果。 图7 最终呈现效果

版本回退 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表的所有项目中，单击页面所在的项目，进入项目。 在所有页面中，单击对应的页面，单击“编辑页面”，进入大屏开发页面。 在工具栏中，单击，进入页面发布设置。 在“版本管理”区域，单击需要回退版本后的，单击“继续编辑”，进行回退。 如果回退前希望保存当前页面，请单击“发布新版本”，将当前页面发布为新版本，再单击需要回退版本后的，单击“继续编辑”，进行回退。 图1 回退到历史版本 图2 提示

页面开发流程 在AstroCanvas可视化开发页面，通过拖拽组件、设置页面布局、对接业务数据等，即可构建AstroCanvas大屏&PC端/移动端页面，具体流程如图5所示。 图5 页面开发流程 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景图片。更多介绍，请参见如何进行设置页面。 构思布局 根据大屏高保真设计或构思，划分基本布局，并拖拽对应的组件到画布中。如何添加组件到画布中，请参见组件管理。 组件设置 为组件对接业务数据、根据大屏互动形式设置交互动作、根据UI设计设置组件的样式、颜色等。支持预览页面、查看整体效果，按需调整，优化布局细节。 各组件功能介绍，请参见组件介绍。 组件数据源设置，请参见数据接入。 如何设置组件交互动作，请参见交互设置。 保存发布页面 保存开发好的页面，并发布。更多介绍，请参见页面管理。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 日期选择器卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。

配置 在配置中，设置组件的日期选择器的类型、输入框边框字体设置等。 图4 日期选择器配置 日期选择器的类型：支持年选择器、月选择器、日选择器、多个日期选择器、周选择器和带时间的日选择器等。 输入框边框字体设置 输入框字体：输入框中字体的大小、颜色等设置。 输入框背景颜色：设置输入框背景颜色。 边框颜色：设置输入框边框的颜色。 边框聚焦颜色：设置鼠标选中输入框时，边框的颜色。 边框悬浮颜色：设置鼠标悬浮在输入框上时，边框的颜色。 输入框内容设置 选择范围时的分隔符：选择日期范围时，中间的分隔符，一般使用“-”。 范围选择时开始日期的占位内容：开始日期输入框中没有选择具体日期时，显示的文字内容。 例如：开始日期，效果图为 范围选择时结束日期的占位内容：结束日期输入框中没有选择具体日期时，显示的文字内容。 非范围选择时的占位内容：不是日期范围选择时，显示的文字内容。 日期弹出框设置 放大倍数：组件发布后，日期弹出框在页面占位相对于开发态中放大的倍数。在大屏页面中，放大倍数建议设置大一些。 背景颜色：设置日期弹出框的背景颜色。 选中态背景颜色：日期弹出框中，选中状态日期的背景颜色。 选中态字体颜色：日期弹出框中，选中状态日期的字体颜色。 前月后月的日期颜色：日期弹出框中，上个月日期和下个月日期的日期颜色。 选择范围的背景色：日期弹出框中，处于选择范围内日期的背景色。 日期弹出框内星期时间设置 星期背景色：日期弹出框内，星期几的背景色。 星期的字体颜色：日期弹出框内，星期几的字体颜色。 时间背景色：日期弹出框内，时间的背景色。 时间的字体颜色：日期弹出框内，时间的字体颜色。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 时间轴图形 时间轴 时间轴方向：时间轴的方向，支持水平方向和垂直方向。 自动轮播：是否展示自动轮播效果。 间隔时间：间隔的时间。 停留时间：停留的时间。 轴条默认样式：设置轴条的默认颜色。 轴条选中样式：设置轴条选中时的颜色。 轴条粗细：轴条的粗细。 轴标签 默认标签字体：设置标签默认的字体、大小、颜色等。 选中标签字体：设置选中标签时，显示的字体、大小、颜色等。 标签旋转：设置标签旋转角度。 默认描述字体：设置标签默认的描述字体、颜色、大小等。 选中描述字体：设置选中标签时的描述字体、颜色、大小等。 描述旋转：设置描述文字旋转角度。 轴节点 类型：轴节点的类型，支持时间型、类目型和数值型。 节点形状：设置节点的形状，支持圆形和菱形。 节点默认样式：设置节点默认样式的颜色。 节点选中样式：设置选中节点时的颜色。 节点大小：设置节点的大小。

注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect: { desc: { zh_CN: "当选中选项时", en_US: "Select Choose" }, fields: [ { name: "selectValue", desc: { zh_CN: "选项值", en_US: "Select Choose" }, }, ], }, }, 在文件global_SelectWidget.js的init钩子中注册事件 * @params thisObj: 组件实例，等同于this * @params "sendSelect": 事件key值 * @params { "zh_CN": "当选中选项时", "en_US": "Select Choose" }: 事件描述，国际化 * @params []: 空数组，固定写法 （内部组件暂时没有用到过） */ Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "当选中选项时", "en_US": "Select Choose" }, []); 图1 配置后效果 表1 eventConfig字段说明 字段 类型 说明 sendSelect String 自定义事件的key值。 desc Object 自定义事件的中英文描述。 fields Array 自定义事件中，暴露给全局变量的内容。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 渐变色饼图卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题 标题：是否显示该组件标题。 内容：组件标题内容。 字体：组件标题字体、大小和颜色设置。 对齐：标题相对于组件的对齐方式。 标题背景色：设置标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与渐变色饼图之间的偏移量。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 参考模板：系统预置的组件样式模板，支持默认和带标签两种。 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图表背景：图表的背景颜色。 图表标题：是否显示图表的标题。设置为“显示”后，可自定义标题内容、内容字体、大小和颜色等。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 渐变色饼图图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 渐变色饼图图形 颜色：设置组件中图表的图例颜色。 统一配置 数据系列：是否显示该系列数据。如果不选中，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 内半径：设置饼图内半径的值，单位%。 外半径：设置饼图外半径的值，单位%。 圆心横坐标：设置饼图圆心横坐标的值，单位%。 圆心纵坐标：设置饼图圆心纵坐标的值，单位%。 排布顺序：扇区可按顺时针或逆时针排布。 起始角度：扇区起始角度。 最小角度：扇区最小角度。 鼠标悬停：鼠标放在扇区时，该扇区是否放大显示。 所有标签设置：设置为“显示”后，图表中会显示标签。 所有标签悬浮设置：鼠标悬浮在对应数据系列上时，标签是否显示。 标签位置：标签显示位置，如内部、外部或中间。 标签视觉引导线是否展现：设置为“是”时，标签前会添加引导线。 引导线长度：设置标签引导线的长度。 标签内容：设置标签显示的内容，包含数据值、百分比和系列名。 标签文字：设置标签内容的字体、大小和颜色等。 描边：实心圆饼图间系列和整体范围描边样式。 设置背景：饼图背景颜色、内外半径设置。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：图表中实际显示的系列名称。 下标：数据系列所在的位置。 初始选中：数据项初始是否被选中。 颜色样式：数据系列的颜色样式，支持以下几种。 单色：可设置正常颜色和高亮下颜色。 渐变色：可设置渐变样式、渐变方向、起始颜色和结束颜色。 纹理：设置为“纹理”时，需要上传纹理图片，支持设置所有数据项纹理重复或者不重复。 普通标签：未选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值“635”。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比“67.2”%。 普通标签字体：设置标签内容的字体、颜色和大小等。 高亮标签：选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值635。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比67.2%。 高亮标签字体：设置标签内容的字体、颜色和大小等。