华为云用户手册

  • 图形 图形是指组件中,实现 数据可视化 的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 图形 颜色:设置图表中,图形的颜色。 统一配置 数据块高度:设置漏斗图的高度比。 标签字体:设置数据块中标签的字体、颜色、大小。 数据系列 系列名称:原始数据中默认的系列名称,可通过设置“显示名称”,进行修改。 显示名称:自定义图表中系列的显示名称。 数据块颜色:数据块的颜色。 标签字体:设置标签的字体、文字大小、文字颜色等。
  • 图例 图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。 图6 图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“label”的值。 图例标记:设置图例小图标形状。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小等。 图例位置:图例的位置。 对齐方式:设置图例的对齐方式,如左对齐、居中或右对齐。 上间距:图例到漏斗图组件顶部距离占组件高度。 图例类型:存在很多图例,导致图表中无法全部显示,此时可设置图例类型,即通过滚动翻页还是普通换行来查看图例。 翻页按钮:翻页按钮的颜色。 翻页按钮不激活:翻页按钮不激活时的颜色。 自定义图例显示:是否开启自定义图例显示设置。开启后,可调整图例名称显示字符长度。默认关闭,即显示图例所有字符。
  • 配置 在配置中,设置组件的基本配置和进度条配置。 图4 配置 基本配置 数字显示:是否显示数字。 数字位置:设置数字的显示位置,如左、居中或右。 数字字体:设置数字的字体、大小和颜色等。 前缀:输入数字的前缀。 字体大小:设置前缀的字体大小。 后缀:设置后缀,如“%”。 字体大小:设置后缀的字体大小。 目标数据显示:是否显示目标数据。 目标数据标题:设置目标数据的标题,如当前目标。 字体:设置目标数据标题的字体、大小和颜色等。 完成数据显示:是否显示完成数据。 完成数据标题:设置完成数据的标题,如已完成。 字体:设置完成数据标题的字体、大小和颜色等。 进度条配置 进度条样式:设置进度条的样式,如圆角矩形、矩形。 进度条宽度:设置进度条的宽度。 进度条颜色:设置进度条当前进度的颜色。 进度条背景色:设置进度条的背景颜色。 图标进度条:是否显示进度条图标。 图标样式:自定义图标样式。建议选择JPG、JPEG、PNG或GIF格式的图片,且每张图片的大小不能超过50MB。 图标宽:设置图标的宽度。 图标高:设置图标的高度。 图标位置:设置图标的显示位置,如进度条上方、进度条下方。
  • 数据 在数据中,配置地图的数据来源,更多介绍请参见数据接入。 图11 设置组件数据源 图12 桥接器设置 自定义围栏数据:地图自定义围栏数据桥接器,数据中省/直辖市code一致,则认为属于同一围栏区域。预览或发布页面时,单击围栏区域,地图会下钻到围栏区域。若未配置该连接器,则下钻到单独省/直辖市。 图13 自定义围栏数据 热力图层数据:热力图层数据桥接器/数据集,根据省/直辖市数值大小,热力图层颜色深浅不一。 柱状图层数据:柱状图层数据桥接器/数据集,根据省/直辖市数值大小,柱子颜色、高度不一。 标签图层数据:标签图层数据桥接器/数据集,以标签形式展示省/直辖市具体数据。
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。
  • 配置 在配置中,设置地图组件的基本信息、热力图层、柱状图层和标签图层等。 图4 配置 地图基本配置 地图类型:地图第三方服务商,如天地图、高德地图和百度地图。 高德/百度/天地图密钥:地图第三方密钥,请自行到对应官网申请。 高德地图第三方密钥,请参考高德开放平台申请。 百度地图第三方密钥,请参考百度地图开放平台申请。 天地图第三方密钥,请参考天地图官网申请。 自定义地图:根据实际需求,自定义地图。若开启自定义地图,请配置地图GeoJson数据链接地址或配置GeoJson数据素材。 地图中心经度:设置地图中心点的经度。 地图中心纬度:设置地图的中心点的纬度。 地图缩放级别:设置地图的缩放层级,最小级别为4,最大级别为19。 地图样式:设置地图基本样式模板。 热力图层配置 显示热力图层:是否显示热力图层。 数据标题:设置热力图层的数据标题。 显示类型 :设置热力图层显示类型,如均分显示或区间部分。 设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。 图5 均分显示 设置为“区间显示”时,仅显示符合要求的数据,且区域图层颜色取决于其数据所处区间对应的颜色。 图6 区间显示 填充颜色:设置热力图层的填充颜色。“显示类型”为“均分显示”时,区域数据从小到大,对应图层颜色由浅到深。“显示类型”为“区间显示”时,区域图层颜色取决于其数据所处区间的对应颜色。 描边样式:设置省/直辖市描边样式,如虚线、点线等。 描边粗细:设置省/直辖市描边粗细,单位为px。 描边颜色:设置省/直辖市描边颜色。 柱状图层配置 显示柱状图层:是否显示柱状图层。 显示类型:设置柱图层显示内容,如均分显示或区间部分。 设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。 图7 均分显示 设置为“区间显示”时,仅显示符合要求的数据,且区域图层颜色取决于其数据所处区间对应的颜色。 图8 区间显示 填充颜色:设置柱子的填充颜色。“显示类型”为“均分显示”时,区域数据从小到大,对应图层颜色由浅到深。“显示类型”为“区间显示”时,区域图层颜色取决于其数据所处区间的对应颜色。 柱子粗细:设置柱子的粗细,单位为px。 柱子长度比:数据最大值对应的柱子高度与该地图上1个纬度直线距离的比值,取值范围为[0, 10]。 显示标注:柱子上是否显示标注文字样式。设置为“显示”时,支持设置标注文字的字体、大小和颜色。 标签图层配置 显示标签图层:是否显示标签图层。 数据标题:设置标签图层的数据标题。 显示类型:设置标签的显示内容,如均分显示或区间部分。 设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。 图9 均分显示 设置为“区间显示”时,仅显示符合要求的数据(如0~10之间的数据),且区域图层颜色取决于其数据所处区间对应的颜色。 图10 区间部分 填充颜色:设置标签数据所处区间的对应颜色。均分显示时,区域数据从小到大,对应图层颜色由浅到深。区间显示时,区域图层颜色取决于其数据所处区间对应颜色。 数值字体:设置标签数值的字体、颜色和大小等。 数值后缀:设置标签数值的后缀,如%。 内容字体:设置标签内容的字体、颜色和大小等。 内容背景颜色:设置标签内容的背景颜色。
  • 操作步骤 参考如何登录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接口的响应样例报文数据格式,元数据结构由该样例报文经转换器处理后的数据结构确定。单击“格式化”,可对样例报文进行格式化处理。 转换器:选择转换器,用于对数据进行转换处理。 数据预览:单击“数据预览”,在右侧可直观展示经过转换器处理后的样例报文。 在左侧流程图中单击“+”,可根据需要添加其他节点,如过滤、排序、限制行数等。 设置完成后,单击“保存”。
  • 数据迁移 登录AstroZero中的业务大屏界面,导出项目数据。 使用华为账号,登录华为云网站,在顶部导航栏右侧单击“控制台”,进入华为云控制台。 在左侧导航栏上方,单击,选择服务实例所在的区域项目。 单击,在查找框中搜索“Astro轻应用”,单击查找到的结果,进入AstroZero服务控制台。 在主页中,单击“进入首页”,进入AstroZero应用开发页面。 单击主页中的“业务大屏”,或者左侧导航栏中的“业务大屏”,进入业务大屏界面。 图1 单击业务大屏 单击待导出项目上的,进入项目发布页面。 将鼠标放在对应的版本上,单击。 图2 单击下载图标 在前端运行包下载页面,运行容器选择“Astro Canvas”,单击“下载”,将项目下载到本地。 图3 导出项目 在已购买的AstroCanvas中,导入项目。 在AstroZero服务控制台的左侧导航栏中,单击“Astro大屏应用”。 在已购买的AstroCanvas实例中,单击“进入首页”,进入AstroCanvas界面。 在项目列表页面,单击“导入项目包”。 图4 导入项目包 选择1.h中导出的项目包,单击“打开”。 导入成功后,在项目列表中,可查看到已导入的项目。
  • 组件通用设置 在AstroCanvas某个可视化页面中,单击画布中的某一个组件,组件上方会出现配置项面板,如图3。AstroCanvas中组件的配置项菜单分为卡片、指标、图形、图例、提示、参考线和坐标轴七大类(不同的组件展示有所不同,请以实际展示的为准)。 图3 组件配置项面板 图4 组件七大分类设置效果 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。 提示(悬浮提示)主要用于展示可视化图表组件,在具体维度节点的具体指标展示。 指标是指可视化组件中,对除可视化图形之外的具体补充,即主要以文字和数字的表现形式,为可视化组件提供具体数值的参考。 坐标轴是指对图表组件,进行坐标系相关样式、颜色、位置和行为的设置。 参考线是指为图表组件添加可视化的参考标准,为图表中数据提供具体的参考依据。
  • 什么是组件? 组件(即Widget)是可复用的页面组成元素,一个页面由一个或多个Widget拼装而成。如果将一个页面看成拼图游戏的完整图案,那么Widget相当于拼图的每一小块。 Widget的运行依赖Library,若缺少相应的Library,则Widget不能正常运行。如果页面要使用前端框架或组件库,例如流行的Vue、Bootstrap、ElementUI等,需要将其制作成Library资产,然后上传到环境中使用。
  • AstroCanvas中组件 介绍AstroCanvas支持的组件类型,以及每个类型下所包含的具体组件,帮助您快速了解各组件的位置分类,更加高效的开发可视化应用。目前AstroCanvas中支持如下类型的组件,各组件详情介绍请参见组件介绍。当预置组件不满足需求时,还可以自定义组件并上传到AstroCanvas中使用,详情请参见自定义组件说明。 当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。 图2 AstroCanvas中组件
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。
  • 创建部门 租户管理员使用华为账号,参考如何登录Astro低代码平台中操作,登录Astro低代码平台。 (可选)选择通信录的维护方式。 AstroCanvas服务当前仅支持自维护,暂不支持对接飞书。首次进入组织层级页面时,才需要执行该操作。 图2 设置通信录维护方式 在组织层级页签中,单击“创建部门”。 在创建部门页面,设置名称和上级部门,单击“确定”。 图3 创建一个子部门 名称:新建组织的名称,请按需进行设置。 上级部门:选择新建部门所属的上级部门。购买AstroCanvas实例后,系统会默认为您创建一个和您账号同名的部门。 描述:新建部门的附加描述信息,请按需进行设置。
  • 配置示例 colorpicker配置示例如下,配置后效果如图1所示。 { "type": "colorpicker", "name": "commProps.myColorpicker", "value": "rgb(208,162,46)", "label": { "zh_CN": "colorpicker的类型", "en_US": "colorpicker Type Example" } } 图1 配置后效果
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 图形 统一配置 图标选中色:设置选中后台排序、后台筛选时,图标的显示颜色。 图9 选中后图标颜色 列自适应:开启后,表格中的列会根据内容自适应。 固定列:设置首列和尾列的样式。当开启“列自适应”后,不支持设置固定列样式。 后台排序:是否开启后台排序功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行排序。后台排序的使用示例,请参见如何使用高级表格的后台排序功能。 图10 在后台对数据进行排序 后台筛选:是否开启后台筛选功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行筛选。后台筛选的使用示例,请参见如何使用高级表格的后台筛选功能。 图11 在后台对数据进行筛选 数据系列:数据系列是一个数组,通常包含多个系列,即通过一个或多个系列配置循环渲染。 图12 数据系列 在数据系列中,拖动某一个系列可以和其他系列组成一个层级,最多支持3层。 图13 新建层级 原数据名:原始数据中默认的系列名称,可通过设置“列名”,进行修改。文字内容来源于数据模型的取值,如名称、门禁结果等。 类型:选择数据的类型,可选单行文本、多行文本、数字、趋势、图片、迷你柱状图、迷你折线图和迷你进度条。不同的类型,展示的参数所有不同,请以界面实际显示的为准。选择迷你柱状图和迷你折线图时,支持放大图表显示。 图14 开启迷你柱状图放大图表功能 图15 预览放大效果 列名:自定义图表中数据系列的显示名称。 数据系列:在图表中,是否显示数据系列。例如,名称系列中,单击开启,图表中将会显示名称这列,如果关闭,将会隐藏掉该列。 合并同类:开启后,对每列内连续且相同内容的单元格进行合并。 后台排序:是否开启后台排序功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行排序。 图16 开启后台排序 后台筛选:是否开启后台筛选功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行筛选。 图17 开启后台筛选 列宽占比(%):设置对应系列在图表中的占比。 表头对齐方式:设置表头的对齐方式,如居中、左对齐等。 表头背景色:设置表头的背景颜色。 表头字体:设置表头的字体、颜色和大小等。 内容对齐方式:设置表格内容的对齐方式,如居中、左对齐等。 内容字体:设置表格内容的字体、颜色和大小等。
  • 配置 在配置中,设置组件的全局样式、表头设置、行、序列号等。 图6 配置 全局样式 背景色:设置表格的背景颜色。 表格行数:设置当前表格可视高度展示的数据行数。 边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。所有列的表头对齐方式同步修改。 表头行高占比(%):设置表头行高的占比。 表头背景色:设置表头的背景颜色,所有列的表头背景色同步修改。 表头字体:设置表头字体,所有列的表头字体同步修改。 边框:设置表头的边框样式。 行配置 奇行背景色:设置奇数行数据的背景颜色。 偶行背景色:设置偶数行数据的背景颜色。 单元格 溢出文本:设置表格中超长文本的显示样式,如显示为省略号、换行显示和滚动显示。 内容对齐方式:设置单元格内的内容对齐方式,如左对齐、居中或右对齐,所有列的内容对齐方式同步修改。 内容字体:设置单元格的内容字体,所有列的内容字体同步修改。 边框:设置单元格的边框样式。 序列号:表格中序列号设置。 序列号:设置表格中是否显示序列号,默认为关闭。 序列名:设置序列号的名称。 列宽占比:设置序列号在表格中的列宽占比。 背景色:设置序列号的背景颜色。 半径:设置序列号的半径。 圆角:设置序列号圆角,0为直角。 字体:设置序列号的字体、大小和颜色等。 轮播 轮播:是否开启轮播功能。开启后,支持设置轮播速度。 轮播速度:设置轮播速度。 分页 后台分页:数据接入有行数上限(当前为500行),超出行数后原来的方式无法动态获取所有的数据,此时可以使用后台分页功能,将表格分页显示。后台分页使用示例,请参见如何使用高级表格的后台分页功能。 行高:设置分页的行高,单位px。 单页数量:设置每页显示数据条数,以“,”隔开。 文本位置:设置分页文本显示位置,支持靠左、靠右和居中显示。 背景色:设置分页背景颜色。 字体:设置分页的字体、大小和颜色等。 选中框颜色:设置选中分页时边框的颜色,包括每页/条的边框、选中当前页的填充色边框和前往第几页的边框。 分页框宽度:设置分页框的宽度,单位为px。 下拉框背景颜色:设置下拉框的背景颜色。 下拉框字体颜色:设置下拉框的字体颜色。 下拉框选中态背景颜色:设置下拉框选中态的背景颜色。 下拉框选中态字体颜色:设置下拉框选中态的字体颜色。 下拉框鼠标悬浮时背景颜色:设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色:设置下拉框鼠标悬浮时的字体颜色。 新增条件格式:单击“新增条件格式”,可增加条件格式。如图7中所示,该设置表示版本问题数列满足设置的条件(大于2200)时,门禁结果列显示为红色,否则显示为正常颜色。 高级表格的条件格式,只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图7 新增条件格式
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。 标题设置 标题:是否显示组件标题。 标题内容:输入标题内容。 标题行高度:设置标题的行高,单位px。 背景色:设置标题背景色。 文本位置:设置标题中文本位置,支持居中、靠左、靠右或自定义。 字体:设置标题的字体、大小和颜色等。 表格操作 列显示/隐藏:在运行态是否可以设置显示/隐藏的列。开启“列显示/隐藏”后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 图4 列显示效果 表格导出:是否开启表格导出功能。开启表格导出后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 图5 导出开启效果 悬浮显示:开启后,鼠标移动到表格组件上时,才会显示对应的按钮。 图标色:设置按钮的图标颜色。 图标选中色:设置选中按钮时,按钮图标的颜色。
  • 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面,拖拽所需组件(如基本柱图)到画布中。 图6 拖拽基本柱图到画布中 选中该组件,单击组件上方的,进入组件数据页面。 在“数据类型”下拉框中,选择“数据集”,选择创建关系型数据库数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量,用于控制组件之间参数的传递,从而达到交互的目的,例如图表联动、自定义字段等功能。如何使用全局变量,可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量,实现组件数据的动态变化。本示例不做配置。 在组件预览中,选择要展示的表字段,即从左边栏中拖入到右边栏中,单击“保存”。 图7 拖拽字段到对应坐标轴 表格字段:展示创建关系型数据库数据集中,接入的关系型数据库中的数据。 配置:从表格字段中,拖拽所需的字段到X轴数据、Y轴数据或系列中。 刷新周期:每隔多少秒从关系型数据库中读取一次数据,默认配置为“0”,表示只获取一次。 共享数据:是否共享数据。勾选后,如果多个组件调用了相同的关系型数据库请求,不会各自只调用,而是共享结果数据。 选中基本柱图组件,单击组件上方的,设置标题内容为“N省各市人口数量(千万)”。 图8 设置图表标题 单击页面上方的,保存设置页面。 单击,进入预览页面,预览效果。 图9 最终呈现效果
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 图形 统一配置 表头行高占比:设置表头的行高占比。 背景色:设置表头背景色。 对齐方式:设置表头对齐方式。 表头字体:设置表头的字体、大小和颜色等。 开启表头换行:是否开启表头换行。 排序:是否开启表头排序。开启后,单击图标,可对表头进行排序。 图8 开启表头排序 数据系列 列数据键值:原始数据中默认的系列名称,可通过设置“列名”,进行修改。文字内容来源于数据模型的取值。 列名:自定义图表中数据系列的显示名称。 列宽占比:设置该数据系列的列宽占比。 背景色:设置该数据系列的背景色。 对齐方式:设置该数据系列中数据的对齐方式,如水平居中、左侧等。 字体:设置数据系列中数据的字体、颜色和大小等。 表头字体:设置表头的字体、颜色和大小等。 排序:是否开启排序功能,开启后支持设置图标背景颜色、悬浮时的背景颜色和选中时的背景颜色等。
  • 配置 在配置中,设置组件的全局样式、表头设置、行、系列号等。 图4 配置 全局样式 表格行数:当前页显示多少行数据。 背景色:设置表格的背景颜色。 轮播:表格是否轮播。设置为“是”时,支持设置单行是否停顿、轮播速度和单行停顿时间。 横向滚动:是否开启横向滚动。 行配置 奇行背景颜色:设置奇数行数据的背景颜色。 偶行背景颜色:设置偶数行数据的背景颜色。 溢出文本:设置表格中超长文本的显示样式,如显示为省略号、换行显示和滚动显示。 序列号:表格中序列号设置。 是否展示:表格中是否显示序列号。 序列号:设置序列号的名称。 列宽占比:设置序列号在表格中的列宽占比。 对齐方式:设置序列号对齐方式,如水平居中、居左和居右。 背景色:设置序列号的背景颜色。 半径:设置序列号的半径。 圆角:设置序列号圆角,0为直角。 字体:设置序列号的字体、大小和颜色等。 分页 是否启动:表格是否分页显示,分页模式下轮播无效。 行高:设置分页的行高,单位px。 单页数量:设置每页显示数据条数,以“,”隔开。 文本位置:设置分页文本显示位置,支持靠左、靠右和居中显示。 背景色:设置分页背景颜色。 字体:设置分页的字体、大小和颜色等。 选中字体颜色:设置选中分页时文本的颜色。 分页框宽度:设置分页框的宽度,单位为px。 下拉框背景颜色:设置下拉框的背景颜色。 下拉框字体颜色:设置下拉框的字体颜色。 下拉框选中态背景颜色:设置下拉框选中态的背景颜色。 下拉框选中态字体颜色:设置下拉框选中态的字体颜色。 下拉框鼠标悬浮时背景颜色:设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色:设置下拉框鼠标悬浮时的字体颜色。 树状表格 懒加载:开启懒加载,必须配置全局变量和交互事件。 展开层级:设置树状表格展开层级。 新增条件格式:单击“新增条件格式”,可增加条件格式。 例如,该组件预置的静态数据如图5所示。期望“series”为“白名单”的“amount”数值标红,参考图6,单击组件上方图标,单击“+ 新增条件格式”,设置条件和响应数据列的样式。 图5 预置数据 图6 新增条件格式
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。 标题设置 是否展示:是否显示组件标题。 标题内容:输入标题内容。 标题行高度:设置标题的行高,单位px。 背景色:设置标题背景色。 文本位置:设置标题中文本位置,支持居中、靠左、靠右或自定义。 字体:设置标题的字体、大小和颜色等。
  • 指标 指标是指可视化组件中,对除可视化图形之外的具体补充,即主要以文字和数字的表现形式,为可视化组件提供具体数值的参考。 图12 指标 显示指标:是否显示指标。 指标内容:设置指标的内容,多数据维度配置示例为“数据系列1指标内容|数据系列2指标内容”。 指标字体:设置指标内容的字体、大小、颜色等。 指标类型:设置指标类型,支持总和、平均值和自定义。 数值内容:“指标类型”设置为“自定义”时,支持自定义数值内容。 数值字体:设置数值字体、大小、颜色等。 数值位数:设置数值小数点后的位数。
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 颜色:设置图表中图形的颜色。 统一配置 水平堆叠:是否堆叠显示(多数据系列效果)。 横向柱条:是否横向柱条效果显示。 柱条圆角:柱状条边框圆角设置,取值为“0”时为直角,“100”为圆角。 柱条宽度:柱状条相对于X轴单位间隔的宽度。 数据标签:是否显示数据标签,即柱状条旁是否显示数值。开启后,支持设置数值显示位置和数值颜色。 数据标签最大值/最小值:是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称:原始数据中默认的系列名称,可通过设置“显示名称”,进行修改。 显示名称:自定义图表中系列的显示名称。 柱条宽度:柱状条相对于X轴单位间隔的宽度。 柱条颜色:设置柱条颜色,如单色或渐变色,支持自定义柱状条的颜色。 定制最大柱条:支持对最大的柱条自定义设置,包括颜色等。 柱条圆角:柱状条边框圆角设置,取值为“0”时为直角,“100”为圆角。 数据标签:是否显示数据标签,即柱状条旁是否显示数值。开启后,支持设置数值显示位置、数值颜色、前缀和后缀。 数据标签最大值/最小值:是否显示柱状条数值的最大值或者最小值。 数据系列的类型:可设置为“柱状”或“折线”。 选取对照哪边的y轴:可设置为“左边y轴”或“右边y轴”。
  • 图例 图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。 图7 图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 左间距:图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距:图例到柱图组件顶部距离占组件高度。 翻页按钮:翻页按钮的颜色。 翻页按钮不激活:翻页按钮不激活时的颜色。 自定义图例显示:是否开启自定义图例显示设置。开启后,可调整图例名称显示字符长度。默认关闭,即显示图例所有字符。
  • 坐标轴 坐标轴是指对图表组件,进行坐标系相关样式、颜色、位置和行为的设置。 图10 坐标轴 x轴 X轴:是否显示X轴。 轴标题:X轴标题。 字体:坐标轴字体、颜色、大小设置。 标题偏移:标题相对于轴线的偏移。 标题旋转:标题旋转角度。 轴线:是否显示轴线,支持设置轴线颜色。 刻度:是否显示刻度。 刻度标签:刻度标签样式,包括是否自动调节标签、显示所有标签。 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。 标签行为:标签字数过多时是否进行处理,包括标签字数过多换行、标签字数过多省略和标签字数过多不做处理。 单行字数:设置标签单行显示的文字个数。“标签行为”设置为“标签字数过多换行”或“标签字数过多省略”时,才需要配置。 标签旋转:标签旋转角度。 网格线:是否显示网格线。 反转:是否对轴数据进行反转。 y轴 Y轴:是否显示Y轴。 轴标题:Y轴标题。 字体:坐标轴字体、颜色、大小设置。 标题偏移:标题相对于轴线的偏移。 标题旋转:标题旋转角度。 轴线:是否显示轴线,支持设置轴线颜色。 刻度:是否显示刻度。 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。 标签旋转:标签旋转角度。 网格线:是否显示网格线。 边界:是否自定义边界。自定义时若最小值输入为数据最大值时,图表y轴起始值为最大值一半。 左Y轴:设置左侧Y轴的边界范围。“边界”选择“自定义”时设置该参数。 右Y轴:设置右侧Y轴的边界范围。“边界”选择“自定义”时设置该参数。 最小间隔:坐标轴最小间隔大小。“边界”选择“自定义”时设置该参数。 左Y轴单位:设置左侧Y轴的单位。 右Y轴单位:设置右侧Y轴的单位。 反转:是否对轴数据进行反转。 标签展示:设置标签展示为“默认”或“计数单位”。
  • 参考线 参考线是指为图表组件添加可视化的参考标准,为图表中数据提供具体的参考依据。 图11 参考线 统一配置:设置参考线两端的样式,如圆形、矩形和三角形等。 Y轴参考线 Y轴参考线:是否显示Y轴参考线。 参考线:设置已有参考线的颜色和线型,单击“新增Y轴参考线”,可新增参考线。单击对应参考线后的,可删除参考线。 X轴参考线 X轴参考线:是否显示X轴参考线。 参考线:设置已有参考线的颜色和线型,单击“新增X轴参考线”,可新增参考线。单击对应参考线后的,可删除参考线。
  • 操作步骤 参考如何登录AstroCanvas中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“保存为卡片”。 图1 选择保存为卡片 您也可以在“图层”中,将鼠标悬浮在组件上,单击“保存为卡片”。 图2 在图层中将组件保存为卡片 在卡片设置中,输入卡片的名称,单击“保存”。 图3 设置卡片的名称 查看保存的卡片。 方式一:在编辑页面“我的卡片”中,查看已保存的卡片。 图4 在编辑页面查看保存的卡片 方式二:在“我的资产”中,查看已保存的卡片。 图5 在我的资产中查看
  • 创建角色并赋予基础权限 租户管理员参考如何登录Astro低代码平台中操作,登录Astro低代码平台。 在左侧导航栏中,选择“组织管理” 。 在“角色与权限”页签,单击“Astro 平台”。 在Astro 平台角色列表中,单击“创建角色”。 输入角色的名称,并选择角色具备的权限,单击“保存”。 例如,创建一个自定义角色,并赋予“企业信息(只读)”和“组织层级(只读)”权限。 图1 创建角色 角色创建后,可参考赋予成员Astro Platform中角色中操作,为其添加成员。
  • 创建角色并通过权限组授权 租户管理员参考如何登录Astro低代码平台中操作,登录Astro低代码平台。 在左侧导航栏中,选择“组织管理” 。 在“角色与权限”页签,单击“Astro 平台”。 在Astro 平台角色列表中,单击“创建角色”。 在创建角色页面,输入角色名称。 在权限组页签中,单击“新增”。 在新增权限组页面,输入权限组名称,选择所需权限,单击“保存”。 图2 新建组织层级权限组 保存成功后,您可以根据需要,继续添加所需的权限组,如图3。 图3 新增只读权限组 返回权限组页签,选中已创建的权限组,单击“保存”。 图4 选择权限组 在角色权限列表中,可以查看到已创建的角色和角色对应的权限。 角色创建后,可参考赋予成员Astro Platform中角色中操作,为其添加成员。
  • 配置示例 time配置示例如下,配置后效果如图1所示。 { "type": "time", "name": "commProps.myTime", "value": "", "label": { "zh_CN": "time-picker的类型", "en_US": "time-picker Type Example" }, "placeholder": { "zh_CN": "请输入标题内容", "en_US": "Enter the title content." } } 图1 配置后效果
共100000条