华为云用户手册

  • 指标 指标是指可视化组件中,对除可视化图形之外的具体补充,即主要以文字和数字的表现形式,为可视化组件提供具体数值的参考。 图10 指标 显示指标:是否显示指标。 指标内容:设置指标内容。 指标字体:设置指标内容的字体、大小、颜色等。 指标类型:设置指标类型,支持总和、平均值和自定义。 数值内容:“指标类型”设置为“自定义”时,支持自定义数值内容。 数值字体:设置数值字体、大小、颜色等。 数值位数:设置数值小数点后的位数。
  • 坐标轴 坐标轴是指对图表组件,进行坐标系相关样式、颜色、位置和行为的设置。 图8 坐标轴 x轴 X轴:是否显示X轴。 轴标题:X轴标题。 字体:设置坐标轴字体、颜色和大小等。 标题偏移:标题相对于轴线的偏移。 标题旋转:标题旋转角度。 轴线:是否显示轴线,支持设置轴线颜色。 刻度:是否显示刻度。 刻度标签:刻度标签样式,包括是否自动调节标签、显示所有标签。 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。 标签行为:标签字数过多时是否进行处理,包括字数过多是否换行、字数过多是否省略和标签字数过多不做处理。 标签旋转:标签旋转角度。 网格线:是否显示网格线。 反转:是否对轴数据进行反转。 y轴 Y轴:是否显示Y轴。 轴标题:Y轴标题。 字体:设置坐标轴字体、颜色和大小等。 标题偏移:标题相对于轴线的偏移。 标题旋转:标题旋转角度。 轴线:是否显示轴线,支持设置轴线颜色。 刻度:是否显示刻度。 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。 最小间隔:坐标轴最小间隔大小。 标签旋转:标签旋转角度。 网格线:是否显示网格线。 轴起始值:设置Y轴的起始值。为方便数据展示,输入为接入数据最大值时,图表Y轴起始值为最大值的一半。 左Y轴单位:设置左侧Y轴的单位。 轴最大值:是否设置轴最大值,支持直接输入阈值。 反转:是否对轴数据进行反转。 柱间阴影:柱间是否显示阴影,支持自定义阴影颜色。 标签展示:设置Y轴标签展示样式,如默认或计数单位。
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。
  • 配置 在配置中,设置输入框和下拉弹出框。 图4 配置 下拉选择框设置 开启多选:开启后,支持自定义默认选项。 默认选择项:下拉框默认的选择项。 字体:下拉框中字体的大小、颜色等设置。 背景颜色:设置下拉框的背景颜色。 边框颜色:默认状态下,下拉框边框的颜色。 边框聚焦颜色:鼠标选中下拉框时,边框的颜色。 边框悬浮颜色:鼠标悬浮在下拉框上时,边框的颜色。 占位符:没有输入内容时,展示的文字内容。 是否禁用:是否禁用该下拉框,禁用后,用户不可选择内容。 是否可输入:禁用后,只能在下拉框中选择,无法输入查找。 下拉弹出框设置 最大高度:设置下拉弹出框的最大高度。 背景颜色:设置下拉弹出框的背景色。 字体颜色:设置下拉弹出框中字体的颜色。 选中态背景颜色:设置选中某项内容时,背景的颜色。 选中态字体颜色:设置选中某项内容时,字体的颜色。 鼠标悬浮时背景颜色:设置鼠标悬浮在某项内容上时,背景的颜色。 鼠标悬浮时字体颜色:设置鼠标悬浮在某项内容上时,字体的颜色。
  • 图形 图形是指组件中,实现 数据可视化 的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色:设置图表中,图形的颜色。 统一配置 是否展现:是否展示水位图开关。 横坐标:水位图整体在组件位置中的横坐标百分比。 纵坐标:水位图整体在组件位置中的纵坐标百分比。 直径:水位图整体大小宽度。 水波颜色:设置水波颜色。 水波背景色:设置水波背景色。 波纹振幅:水波动画波纹震动大小。 显示双波纹:水波动画是否显示双波纹。 次波纹颜色:显示双波纹时,第二波纹颜色。 标签是否展现:水位图中心标签字符展现开关。 标签位置左偏移:水位图中心标签字符在水位图中的左边偏移位置。 标签位置上偏移:水位图中心标签字符在水位图中的上边偏移位置。 标签字体:水位图中心标签字体设置(字体样式、粗细、大小、颜色)。 波浪上时文本颜色:当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现:水位图外层轮廓展示开关。 边框宽度:水位图外层轮廓宽度。 颜色:轮廓颜色样式设置,可以设置为单色或渐变色。
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。 标题 标题:是否显示该组件标题。 内容:组件标题内容。 字体:文字的字体、大小、颜色设置。 对齐:标题相对于组件的对齐方式。 标题背景色:设置标题的背景颜色。 内边距:标题与组件框上下左右四个边界之间的距离,单位默认px。 标题偏移:组件标题与钻石水位图之间的偏移量。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右)的距离(参见图2),默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。 参考模板:系统预置的组件样式模板,支持默认模板和标签模板两种样式。 边框圆角:边框的圆角,四个角弧度取值范围为0~500,单位px。 图表背景:图表的背景颜色。 图表标题:图表标题是否显示,支持自定义或者从系列中获取。
  • 指标 指标是指可视化组件中,对除可视化图形之外的具体补充,即主要以文字和数字的表现形式,为可视化组件提供具体数值的参考。 图11 指标 显示指标:是否显示组件的指标。设置为显示时,可自定义指标的内容和样式等。 标题内容:自定义指标的显示内容。 标题字体:设置指标标题的字体、大小和颜色等。 自动求和:指标是否自动求和。 数值内容:“自动求和”设置为“否”时,需要输入数据指标数值。 数值字体:设置数值的字体、大小和颜色等。
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 颜色:设置图表中,图形的颜色。 统一配置 数据系列:是否显示该系列数据。若不选中,会隐藏该组件中对应的系列数据。 南丁格尔图:是否使用南丁格尔图。 内半径:设置饼图内半径的值,单位%。 外半径:设置饼图外半径的值,单位%。 圆心横坐标:设置饼图圆心横坐标的值,单位%。 圆心纵坐标:设置饼图圆心纵坐标的值,单位%。 排布顺序:扇区可按顺时针或逆时针排布。 起始角度:扇区起始角度。 最小角度:扇区最小角度。 鼠标悬停:鼠标放在扇区时,该扇区是否放大显示。 所有标签设置:图表的各个数据系列上,是否显示标签。 所有标签悬浮设置:鼠标悬浮在对应数据系列上时,标签是否显示。 标签位置:标签显示位置,如内部、外部或中间。 标签视觉引导线是否展现:标签前是否显示视觉引导线。 引导线长度:设置视觉引导线的长度。 标签内容:设置标签显示的内容,如系列名、数据值和百分比。 标签文字:设置标签的字体、大小和颜色等。 描边:轮播饼图间系列和整体范围的描边样式。 图7 设置描边效果 设置背景:设置为“是”时,可自定义饼图的背景颜色。 数据系列 系列名称:原始数据中默认的系列名称,可通过设置“显示名称”,进行修改。 显示名称:自定义图表中系列的显示名称。 下标:数据系列所在的位置。 初始选中:数据项初始是否被选中。 颜色样式:数据系列的颜色样式,支持以下几种。 单色:可设置正常颜色和高亮下颜色。 渐变色:可设置渐变样式、渐变方向、起始颜色和结束颜色。 纹理:通过上传纹理图片,自定义数据系列的颜色样式。 普通标签:未选中数据系列时,标签的样式。 系列名是否展示:标签中系列名是否显示,如工程管理。 数据值是否展示:标签中数据值是否显示,如工程管理对应的数据值“635”。 百分比是否展示:标签中百分比是否显示,如工程管理对应的百分比“67.2”%。 普通标签字体:设置标签内容的字体、颜色和大小等。 高亮标签:选中数据系列时,标签的样式。 系列名是否展示:标签中系列名是否显示,如工程管理。 数据值是否展示:标签中数据值是否显示,如工程管理对应的数据值635。 百分比是否展示:标签中百分比是否显示,如工程管理对应的百分比67.2%。 高亮标签字体:设置标签内容的字体、颜色和大小等。
  • 图例 图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。 图8 图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 图例位置(左):图例到饼图组件左侧距离占组件高度的百分比,或者图例位置的对齐方式。 左间距:图例到饼图组件左侧距离占组件比例。“图例位置(左)”设置为“百分比”时,才会显示该配置。 对齐方式:设置图例的对齐方式,如左对齐,居中和右对齐。“图例位置(左)”设置为“对齐方式”时,才会显示该配置。 上间距:图例到饼图组件顶部距离占组件高度。 图例类型:存在很多图例,导致图表中无法全部显示,此时可设置图例类型,即通过滚动翻页还是普通换行来查看图例。 翻页按钮:翻页按钮的颜色。 翻页按钮不激活:翻页按钮不激活时的颜色。 自定义图例显示:开启后,可调整图例名称显示字符长度。默认关闭,即显示图例所有字符。
  • 购买实例 进入购买Astro大屏应用实例页面。 选择购买的实例版本和购买时长,单击“立即购买”。 购买实例时,支持同时购买页面扩容包,也可以在实例购买后,对页面进行扩容。页面扩容包计费规则,请参见计费项。 图1 购买实例(基础版) 图2 购买实例(专业版) 选择支付方式,单击“确认付款”,完成订单支付。 图3 确认付款 订单支付成功后,单击“返回Astro轻应用控制台”。 图4 返回控制台 在Astro大屏应用控制台中,可以查看Astro大屏应用的安装状态。当“实例状态”变为“运行中”时,说明实例已安装好,可以正常使用。 图5 Astro大屏应用控制台
  • 页面扩容 页面扩容包仅适用于在购买基础版/专业版实例的基础上使用,不可单独购买和退订。扩容包的使用截止时间与主资源的截止时间保持一致。在使用AstroCanvas过程中,当页面数达到上限时,可通过购买页面扩容包来增加页面数。 在已购买的实例中,单击“页面扩容”。 图6 单击页面扩容 设置扩容页面的个数,单击“去支付”。 图7 页面扩容 选择支付方式,单击“确认付款”,完成订单支付。 订单支付成功后,单击“返回Astro轻应用控制台”。 在AstroCanvas已购买的实例中,可查看到扩容的页面数量。 图8 查看扩容页面的数量
  • savePropertiesForWidget() 该API用于在开发态中,保存当前组件的高级设置属性信息。 /* * @param {*} props {} */ magno.savePropertiesForWidget({ // 属性应该与editor.js中的属性对应 barChartProps: JSON.stringify(_this.barPropList), barCommProps: JSON.stringify(_this.barCommProps) }); 属性值需要是String,若为对象形式则需要做String转换。
  • 操作步骤 在AstroCanvas界面的“项目列表”页面,单击待下载项目上的。 在版本管理中,鼠标放在对应版本后的“操作”下,单击。 图1 下载对应版本的项目包 根据业务需求,选择运行容器,单击“下载”。 图2 选择运行容器 运行容器:选择项目包的运行容器。 Astro Canvas:使用该运行容器下载的项目包,可在其他AstroCanvas环境的项目列表中,通过单击“导入项目包”进行安装使用,实现将环境A迁移项目到环境B。 OneMobile:使用该运行容器下载的项目包,可在华为OneMobile上安装运行。选择此方式时,还需配置应用ID、主页、环境类型等参数。 图3 OneMobile 应用ID:小程序AppID,请登录小程序管理后台获取。 主页:选择一个发布的页面作为首页,即打开小程序时,显示的默认页面。 环境类型:承载应用程序服务的环境类型,支持开发环境、生产环境、沙箱环境和不依赖。 开发环境:开发者专门用于开发应用的环境,用户可根据需求自定开发配置各种逻辑模块化元素,从而创建各种应用。 沙箱环境:在应用正式发布上线前,需要在测试环境进行测试,包含数据配置。 生产环境:应用正式发布上线的真实环境。测试完成后,将应用发布至生产环境,即运行环境,供业务用户使用。 不依赖:不依赖任何环境。 生产环境/沙箱环境 域名 :提供服务环境的域名,如https://www.demo.com。 生产环境/沙箱环境 租户ID:提供服务环境的租户ID。
  • 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面,拖拽所需组件(如基本柱图)到画布中。 图3 拖拽基本柱图到画布中 选中该组件,单击组件上方的,进入组件数据页面。 在“数据类型”下拉框中,选择“数据集”,选择创建数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量,用于控制组件之间参数的传递,从而达到交互的目的,例如图表联动、自定义字段等功能。AstroZero不支持配置全局变量。 在组件预览中,选择要展示的表字段,即从左边栏中拖入到右边栏中,单击“保存”。 图4 拖拽字段到坐标轴 表格字段:展示创建数据集中,获取的数据。 配置:从表格字段中,拖拽所需的字段到X轴数据、Y轴数据和系列中。 刷新周期:每隔多少秒从AstroZero中读取一次数据,默认配置为“0”,表示只获取一次。 共享数据:是否共享数据。勾选后,如果多个组件调用了相同的桥接器URL请求,不会各自只调用,而是共享结果数据。 选中基本柱图组件,单击组件上方的,设置标题内容为“A市男性小学生平均身高统计”。 图5 设置图表标题 单击页面上方的,保存设置页面。 单击,进入预览页面,预览效果。 图6 最终呈现效果
  • 配置示例 input配置示例如下,配置后效果如图1所示。 { "type": "text", "name": "commProps.myText", "value": "我是text的类型", "label": { "zh_CN": "text的类型", "en_US": "text Type Example" }, "placeholder": { "zh_CN": "请输入标题内容", "en_US": "Enter the title content." }, "prefix": "↑", "suffix": "%" } 图1 设置后效果
  • 事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 input blur 在input值改变时触发 (event, data, field) change change 仅在输入框失去焦点或用户按下回车时触发 (data, field) blur blur 在输入框获得焦点时触发 (value, data, field) focus focus 在输入框失去焦点时触发 (value, data, field)
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 图形 统一配置 图标选中色:设置选中前台排序、前台筛选时,图标的显示颜色。 图8 选中前台排序时图标显示的颜色 前台排序:是否开启前台排序功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行排序。 图9 在前台对数据进行排序 前台筛选:是否开启前台筛选功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行筛选。 图10 在前台对数据进行筛选 数据系列:数据系列是一个数组,通常包含多个系列,即通过一个或多个系列配置循环渲染。 图11 数据系列 在数据系列中,拖动某一个系列可以和其他系列组成一个层级,最多支持3层。 图12 新建层级 图13 新建图层 原数据名:原始数据中默认的系列名称,可通过设置“列名”,进行修改。文字内容来源于数据模型的取值,如组件名称、时延和成功率。 类型:选择数据的类型,如单行文本、多行文本、数字、趋势、图片、迷你柱状图、迷你折线图和迷你进度条。不同的类型,展示的参数所有不同,请以界面实际显示的为准。本章节以单行文本为例,进行介绍。选择迷你柱状图和迷你折线图时,支持放大图表显示。 图14 图表放大显示 列名:自定义数据中的系列名称。 数据系列:在图表中,是否显示数据系列。例如,组件名称系列中,单击开启,图表中将会显示组件名称这列,如果关闭,将会隐藏掉该列。 图15 开启数据系列效果 图16 关闭数据系列效果 前台排序:是否开启前台排序功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行排序。“数据系列”设置为“开启”时,才会展示该配置。 图17 在前台对数据进行排序 前台筛选:是否开启前台筛选功能。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行筛选。 图18 在前台对数据进行筛选 列宽占比(%):设置对应系列在图表中的占比。 表头对齐方式:设置表头的对齐方式,如居中、左对齐等。 表头背景色:设置表头的背景颜色。 表头字体:设置表头的字体、颜色和大小等。 内容对齐方式:设置表格内容的对齐方式,如居中、左对齐等。 内容字体:设置表格内容的字体、颜色和大小等。
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。 标题设置 标题:是否显示组件标题。 标题内容:输入标题内容。 标题行高度:设置标题的行高,单位px。 背景色:设置标题背景色。 文本位置:设置标题中文本位置,支持居中、靠左、靠右或自定义。 字体:设置标题的字体、大小和颜色等。 表格操作 列显示/隐藏:在运行态是否可以设置显示/隐藏的列。开启“列显示/隐藏”后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 图4 列显示效果 表格导出:是否开启表格导出功能。开启表格导出后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 下载数据无父子集关系。 悬浮显示:开启悬浮显示后,鼠标移动到表格组件上时,才会显示对应的按钮。 图标色:设置按钮的图标颜色。 图标选中色:设置选中按钮时,按钮图标的颜色。
  • 配置 在配置中,设置组件的背景色、表格行数、表头和单元格等。 图5 配置 全局样式 背景色:设置表格的背景颜色。 表格行数:当前表格可视高度展示的数据行数。 边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。 表头行高占比(%):设置表头行高的占比。 表头背景色:设置表头的背景颜色,所有列的表头背景色同步修改。 表头字体:设置表头字体,所有列的表头字体同步修改。 边框:设置表头的边框样式。 单元格 溢出文本:设置表格中超长文本的显示样式,如显示为省略号、换行显示和滚动显示。 内容对齐方式:设置单元格内的内容对齐方式,如左对齐、居中或右对齐,所有内容对齐方式同步修改。 内容字体:设置单元格的内容字体,所有列的内容字体同步修改。 边框:设置单元格的边框样式。 树状表格 懒加载:开启懒加载时,必须配置全局变量和交互事件。 展开层级:选择树状表格的展开层级。 新增条件格式:单击“新增条件格式”,可增加条件格式。如图6中所示,该设置表示成功率列满足设置的条件(等于80.4%)时,组件名称列显示为红色,否则显示为正常颜色。 树状表格的条件格式,只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图6 新增条件格式
  • 操作步骤 参考如何登录AstroCanvas中操作,登录AstroCanvas界面。 在AstroCanvas界面的项目列表中,单击已创建的项目,进入项目。 在主菜单中,选择“项目设置”,进入项目设置页面。 参考设置项目锁中操作,获取项目锁。 在左侧导航栏中,选择“通用”。 设置网页的图标等,单击“保存”。 图1 通用设置 开启页面加载动画:勾选后,预览或打开页面时,将会显示加载动画。 网页图标:设置项目在浏览器标签页标题左侧的图标。图片类型支持ico、png、pjp、jpg、pjpeg、jpeg和jfif,图片大小不能超过1MB,建议使用大小为32*32像素的ico图标。 延迟加载隐藏的组件:勾选后,预览或打开页面时,将先加载显示的组件,再加载隐藏的组件。
  • 如何设置页面间参数传递 AstroCanvas开发中,可通过设置组件的事件和动作属性来实现组件与组件、组件与页面之间的交互。在组件的交互响应事件中,可通过“页面跳转”响应动作传递页面参数。当跳转页面时,当前页面参数会传入到打开的页面中,支持自定义传参为固定值,也可绑定页面级全局变量。 例如,在如何基于页面级的全局变量实现组件交互开发的页面中,在“多区域折线图”组件上方单击,配置组件交互事件。参考图1,单击“+交互事件”,选择“点击”事件,单击“+响应动作”,选择“页面跳转”,跳转到内部其他页面,打开“设置页面参数”开关,设置参数。 配置效果:在发布后的页面中,单击“多区域折线图”组件,会跳转到新页面,之前页面的全局变量“status”赋值到参数“alarmStatus”中,将“alarmStatus”传递到新打开的页面中,实现不同页面间传参。 图1 设置交互事件动作 父主题: AstroCanvas学堂
  • 操作步骤 参考如何登录AstroCanvas中操作,登录AstroCanvas界面。 在AstroCanvas界面的项目列表中,单击已创建的项目,进入项目。 在主菜单中,选择“项目设置”,进入项目设置页面。 参考设置项目锁中操作,获取项目锁。 在左侧导航栏中,选择“健康检查”。 开启健康检查。 图1 健康检查 开启健康检查功能后,平台会对页面运行状态进行检查。您也可以根据业务需求,自定义健康检查项。 全选:选中所有的健康检查项。 展示页面加载进度条:勾选后,页面顶部会出现页面加载进度条。 开启浏览器内存使用率异常提醒:勾选后,如果浏览器内存使用率超过70%,页面右下角会弹框提醒。 开启资源访问耗时过长提醒:勾选后,如果单个资源访问耗时超过1秒,页面右下角会弹框提醒。 开启接口请求错误提醒:勾选后,如果接口请求出现错误,页面右下角会弹框提醒。 开启代码执行异常提醒:勾选后,如果代码执行出现错误,页面右下角会弹框提醒。 开启首屏加载耗时过长提醒:勾选后,如果页面首屏加载耗时超过5秒,页面右下角会弹框提醒。 开启子页面加载状态检查:勾选后,平台会检测iframe子页面的运行状态。
  • 认识Widget包目录结构 解压下载到本地的组件Widget包,认识组件结构。如解压EchartsWidgetTemplate组件包,其目录结构如图2所示。 图2 Widget包目录结构 为了便于描述,对于名称不固定的手册,统一采用“{widget}”来命名。 i18n.json:组件的国际化资源文件,用于配置多语言。例如,messages-zh.json为中文,messages-en.json为英文。 packageinfo.json:组件的元数据描述文件。 {widget}.css:组件的样式文件,在该文件中编写组件的 CSS 样式。 {widget}.editor.js:组件核心渲染文件。组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt:组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。 {widget}.js:组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。
  • 配置 在配置中,设置组件的全局样式、表头设置、行、序列号等。 图5 配置 全局样式 背景色:设置表格的背景颜色。 表格行数:当前页显示多少行数据。 边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。 表头行高占比(%):设置表头行高的占比。 表头背景色:设置表头的背景颜色,所有列的表头背景色同步修改。 表头字体:设置表头字体,所有列的表头字体同步修改。 边框:设置表头的边框样式。 行配置 奇行背景色:设置奇数行数据的背景颜色。 偶行背景色:设置偶数行数据的背景颜色。 单元格 溢出文本:设置表格中超长文本的显示样式,如显示为省略号、换行显示和滚动显示。 内容对齐方式:设置单元格内的内容对齐方式,如左对齐、居中或右对齐,所有内容对齐方式同步修改。 内容字体:设置单元格的内容字体,所有列的内容字体同步修改。 边框:设置单元格的边框样式。 序列号:表格中序列号设置。 序列号:表格中是否显示序列号。 序列名:设置序列号的名称。 列宽占比:设置序列号在表格中的列宽占比。 背景色:设置序列号的背景颜色。 半径:设置序列号的半径。 圆角:设置序列号圆角,0为直角。 字体:设置序列号的字体、大小和颜色等。 轮播 轮播:是否开启轮播功能。开启后,支持设置轮播速度。 轮播速度:设置轮播速度。 分页 前台分页:表格是否分页显示,分页模式下轮播无效。 行高:设置分页的行高,单位px。 单页数量:设置每页显示数据条数,以“,”隔开。 文本位置:设置分页文本显示位置,支持靠左、靠右和居中显示。 背景色:设置分页背景颜色。 字体:设置分页的字体、大小和颜色等。 选中框颜色:设置选中分页时边框的颜色,包括每页/条的边框、选中当前页的填充色边框和前往第几页的边框。 分页框宽度:设置分页框的宽度,单位为px。 下拉框背景颜色:设置下拉框的背景颜色。 下拉框字体颜色:设置下拉框的字体颜色。 下拉框选中态背景颜色:设置下拉框选中态的背景颜色。 下拉框选中态字体颜色:设置下拉框选中态的字体颜色。 下拉框鼠标悬浮时背景颜色:设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色:设置下拉框鼠标悬浮时的字体颜色。 新增条件格式:单击“新增条件格式”,可增加条件格式。
  • 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 卡片 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 上边距:图表到组件边框顶部的距离。 右边距:图表到组件边框右侧的距离。 下边距:图表到组件边框底部的距离。 左边距:图表到组件边框左侧的距离。 标题设置 标题:是否显示组件标题。 标题内容:输入标题内容。 标题行高度:设置标题的行高,单位px。 背景色:设置标题背景色。 文本位置:设置标题中文本位置,支持居中、靠左、靠右或自定义。 字体:设置标题的字体、大小和颜色等。 表格操作 列显示/隐藏:在运行态是否可以设置显示/隐藏的列。开启“列显示/隐藏”后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 图4 列显示效果 表格导出:是否开启表格导出功能。开启表格导出后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 悬浮显示:开启后,鼠标移动到表格组件上时,才会显示对应的按钮。 图标色:设置按钮的图标颜色。 图标选中色:设置选中按钮时,按钮图标的颜色。
  • 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 统一配置 图标选中色:设置图标选中时的颜色。设置的图标选中色,对所有列均有效。 图7 选中效果 前台排序:是否开启前台排序功能(表格中的所有列),用于对表格中的数据进行排序。 图8 开启前台筛选效果 前台筛选:是否开启前台筛选功能(表格中的所有列),用于对表格中的数据进行筛选。 图9 开启前台筛选效果 数据系列:设置组件名称、时延和成功率三大数据的属性。 原数据名:原始数据中默认的系列名称,可通过设置“列名”,进行修改。文字内容来源于数据模型的取值。 列名:自定义图表中数据系列的显示名称。 数据系列:图表中是否显示该数据系列。 前台排序:是否开启前台排序功能(表格中指定的列)。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行排序。 图10 在前台对数据进行排序 前台筛选:是否开启前台筛选功能(表格中指定的列)。开启后,在预览表格时会显示下图中的图标,用于对表格中的数据进行筛选。 图11 在前台对数据进行筛选 列宽占比:设置列宽的占比。 表头对齐方式:设置表头的对齐方式,如居中、左对齐等。 表头背景色:设置表头的背景颜色。 表头字体:设置表头的字体、颜色和大小等。 内容对齐方式:设置表格中内容的对齐方式,如居中、左对齐等。 内容字体:设置表格中内容的字体、颜色和大小等。
  • 操作步骤 参考如何登录AstroCanvas中操作,登录AstroCanvas界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击“新建数据源”。 选择“Roma连接器”,配置数据源参数。 图1 新建Roma连接器数据源 数据源名称:新建数据源的名称,用于标识该数据源。长度为1~32个字符,可包括中文、字母、数字及下划线,且不能以下划线开头或结尾。 APIC服务地址:ROMA Connect服务集成APIC的网关地址,配置该值后,可实现调用ROMA Connect的服务API。 服务集成APIC(API Connect,简称APIC)是ROMA Connect的API集成组件,APIC将数据和后端服务以API形式开放,简化分享数据或提供服务的过程,降低企业之间对接的成本。 AppKey:ROMA Connect上应用的Key值,获取方式如下: 登录ROMA Connect实例控制台。 在左侧导航栏中,选择“集成应用”。 单击应用名,进入概览页面,即可查看到Key值。 AppSecret:ROMA Connect上应用的请求密钥,用于私钥认证,获取方式如下: 登录ROMA Connect实例控制台。 在左侧导航栏中,选择“集成应用”。 单击应用名,进入概览页面。 单击Secret右侧的图标,即可查看Secret值。 描述:新建数据源的描述信息。 单击“保存”,完成数据源的创建。
  • 操作步骤 进入已开发好的页面。 在页面工具栏中,单击,保存页面。 保存成功后,单击,打开“发布链接”开关。 图1 打开发布链接(新建项目) 图2 打开发布链接(已有项目) 单击,可生成新的链接,原链接将不可访问。单击,可复制该链接。 打开“Token认证”开关,设置签名校验参数和有效期。 图3 设置Token认证 :打开Token认证开关后,AstroCanvas会生成一个Token。单击该图标,可复制Token。 签名地址只允许打开一次:开启后,签名地址仅允许在当前浏览器中使用。关闭浏览器后,再次访问时需要重新获取签名地址。若不开启,不限制访问次数,但支持设置有效期。
  • 创建项目 参考如何登录AstroCanvas中操作,登录AstroCanvas界面。 在“项目列表”中,单击“新建项目”。 在新建项目页面,选择“大屏&PC端”,输入项目名称,单击“新建”。 项目名称的长度为1~64个字符,可包括中文、字母、数字及下划线,但不能以下划线开头或结尾。 图1 新建项目 系统自动进入该新建项目的“大屏&PC端项目”页面,如图2。 图2 大屏&PC端项目页面 (可选)项目创建后,可参考项目管理中内容,对项目进行设置。
  • 图例 图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。 图16 图例 显示图例:是否展示图例。开启后,可设置饼图的图例样式。 图例标记:设置图例标记的样式,包括图例的形状样式和图例布局朝向。 图17 图例标记 图例宽高:设置图例的宽度和高度。 图例间隔:设置两个图例之间的间隔。 字体:设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 图例位置(左):图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距:图例到饼图组件顶部距离占组件高度。 图例类型:存在很多图例,导致图表中无法全部显示,此时可设置图例类型,即通过滚动翻页还是普通换行来查看图例。 翻页按钮:翻页按钮的颜色。 翻页按钮不激活:翻页按钮不激活时的颜色。 自定义图例显示:开启后,可调整图例名称显示字符长度。默认关闭,即显示图例所有字符。
共100000条