华为云用户手册

ASTRO大屏应用 ASTROCANVAS-多折线图:图形

图形图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。图7 图形颜色：设置图表中图形的颜色。统一配置折线类型：设置图形中折线类型，包括平滑和不平滑。折线宽度：设置图形中折线的宽度，取值范围0~100 拐点尺寸：设置拐点尺寸，取值范围0~100 数据标签：是否显示数据标签，支持设置标签颜色。数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。数据系列系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。显示名称：自定义图表中系列的显示名称。折线类型：设置图形中折线类型，包括平滑和不平滑。折线宽度：设置图形中折线的宽度，取值范围0~100。折线颜色：设置折线颜色，支持单色和渐变色。如果开启了阈值线，渐变会随着阈值线值变化。折线不透明度：设置折线的不同透明度。拐点尺寸：设置拐点尺寸，取值范围0~100。拐点颜色：设置拐点显示的颜色。拐点不透明度：设置拐点不透明度。区域颜色：设置折线图中区域颜色。数据标签：是否显示数据标签，支持设置标签颜色、前缀和后缀。数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-多折线图:图例

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-多折线图:卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-colorpicker:配置示例

配置示例 colorpicker配置示例如下，配置后效果如图1所示。 { type: 'colorpicker', name: 'commProps.myColorpicker', value: 'rgb(208,162,46)', label: { zh_CN: 'colorpicker的类型', en_US: 'colorpicker Type Example' } } 图1 配置后效果

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-组件响应动作实现:响应动作函数

响应动作函数以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。 /** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 */ confirmLocationWidgetCbk: function (param) { if (param && param.eventParam && this.vm) { this.vm.getDataEntry(param.eventParam); } }, // 获取当前输入框值 getInputValue: function () { if (this.vm && this.vm.selectConfObj) { return this.vm.selectConfObj.selectValue; } }, // 设置组件双向绑定的值 setInputWidgetValue: function (value) { this.vm.selectConfObj.selectValue = value; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value; } this.advanceEditvm?.save(); }, // 更新组件配置 setWidgetProperties: function (selectConfObj) { magno.savePropertiesForWidget({ selectConfObj: JSON.stringify(selectConfObj), }); }, setInput: function (value) { this.vm.selectConfObj.selectValue = value.customizeVal; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value.customizeVal; } this.advanceEditvm?.save(); },

ASTRO大屏应用 ASTROCANVAS 组件交互
ASTRO大屏应用 ASTROCANVAS-组件响应动作实现:注册动作

注册动作在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio.registerAction( thisObj, 'confirmLocationWidgetCbk', 'confirmLocationWidgetCbk', [], $.proxy(thisObj.confirmLocationWidgetCbk, thisObj), [], ); Studio.registerAction(thisObj, 'getInputValue', 'getInputValue', [], $.proxy(thisObj.getInputValue, thisObj), []); Studio.registerAction( thisObj, 'setInputWidgetValue', 'setInputWidgetValue', [], $.proxy(thisObj.setInputWidgetValue, thisObj), [], ); Studio.registerAction( thisObj, 'setWidgetProperties', 'setWidgetProperties', [], $.proxy(thisObj.setWidgetProperties, thisObj), [], ); Studio.registerAction( thisObj, 'setInput', 'setInput', [{ name: 'customizeVal', type: 'text' }], $.proxy(thisObj.setInput, thisObj), [], );

ASTRO大屏应用 ASTROCANVAS 组件交互
ASTRO大屏应用 ASTROCANVAS-我的素材:新建目录

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-图标进度条:配置

配置在配置中，设置组件的基本配置和进度条配置。图4 配置基本配置数字显示：是否显示数字。数字位置：设置数字的显示位置，如左、居中或右。数字字体：设置数字的字体、大小和颜色等。前缀：输入数字的前缀。字体大小：设置前缀的字体大小。后缀：设置后缀，如“%”。字体大小：设置后缀的字体大小。目标数据显示：是否显示目标数据。目标数据标题：设置目标数据的标题，如当前目标。字体：设置目标数据标题的字体、大小和颜色等。完成数据显示：是否显示完成数据。完成数据标题：设置完成数据的标题，如已完成。字体：设置完成数据标题的字体、大小和颜色等。进度条配置进度条样式：设置进度条的样式，如圆角矩形、矩形。进度条宽度：设置进度条的宽度。进度条颜色：设置进度条当前进度的颜色。进度条背景色：设置进度条的背景颜色。图标进度条：是否显示进度条图标。图标样式：自定义图标样式。建议选择JPG、JPEG、PNG或GIF格式的图片，且每张图片的大小不能超过50MB。图标宽：设置图标的宽度。图标高：设置图标的高度。图标位置：设置图标的显示位置，如进度条上方、进度条下方。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-路由导航(示例):卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-路由导航(示例):配置

配置在配置中，设置组件的页签样式、导航页签和默认路由。图4 配置页签样式统一配置页签方向：设置页签的显示方向，如水平方向、垂直方向。位置：设置页签的位置，支持默认和自定义两种方式。快捷设置：设置页签的显示位置，如居左、居右或居中。“位置”设置为“默认”时，才显示该配置。上间距(%)：设置页签距离组件上边界的距离。“位置”设置为“自定义”时，才显示该配置。左间距(%)：设置页签距离组件左边界的距离。“位置”设置为“自定义”时，才显示该配置。导航页签：在导航页签，可删除或新增路由，也可对路由进行如下设置。页签内容：设置当前路由页签的显示内容。页签路由：选择当前路由页签关联的页面，只能选择已发布的页面。默认文字：设置路由页签默认文字的字体、颜色和大小等。默认样式：设置路由的默认样式，支持设置为颜色和自定义。悬浮文字：设置鼠标悬浮在路由上时，页签内容的字体、大小和颜色等。悬浮样式：鼠标悬浮在路由上时，路由显示的样式，支持设置为颜色和自定义。点击文字：设置单击路由时，页签内容的字体、大小和颜色等。点击样式：设置单击路由时的样式，支持设置为颜色和自定义。默认路由：进入路由导航时，默认显示的页面。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-轮播饼图:指标

指标指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。图11 指标显示指标：是否显示组件的指标。设置为显示时，可自定义指标的内容和样式等。标题内容：自定义指标的显示内容。标题字体：设置指标标题的字体、大小和颜色等。自动求和：指标是否自动求和。数值内容：“自动求和”设置为“否”时，需要输入数据指标数值。数值字体：设置数值的字体、大小和颜色等。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-轮播饼图:图形

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-轮播饼图:图例

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-搜索框:卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-日历组件:配置

配置在配置中，设置日历组件当月默认状态、选中状态、日历卡片、头部等。图4 配置当月默认状态/选中状态/前月和下月状态/数据系列4...... 对应的状态码，系统默认有如下几个状态，每个状态有对应的状态码来标识。当月默认状态：状态码为“0”。选中状态：状态码为“1”。前月和下月状态：状态码为“2”。状态4/5/6/7：其他状态，每种状态可对应日历上的待办事项或者重要内容等。该状态下日期块的背景色：设置当前状态下日期块的背景颜色。日期字体：设置该状态下日期字体、文字大小、日期文字颜色等。日期的行高大小：设置该状态下日期的行高大小。内容字体：设置该状态下日期上备注的内容字体、文字大小、内容文字颜色等。日历卡片背景色：设置日历卡片的背景颜色。边框色：设置日历卡片边框的颜色。日期块的高度：设置每个日期块的高度。日期块对齐方式：设置日期块的对齐方式，如左对齐、右对齐、居中。日历头部年月字体：设置日历头部年月字体、文字大小、年月文字颜色等。快捷按钮字体：设置日历头部右侧快捷按钮字体、字体大小和颜色等。快捷按钮背景色：设置日历头部右侧快捷按钮的背景色。星期字体：设置日历头部星期的字体、文字大小、文字颜色等。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-热力图:坐标轴

坐标轴在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。图6 坐标轴 x轴 X轴：是否显示X轴。坐标轴分割段数：设置坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。最小值：设置坐标轴的最小值。最大值：设置坐标轴的最大值。刻度标签旋转的角度：控制刻度标签的旋转，在文字过长时可以避免重叠。轴线显示：控制是否显示轴线。刻度显示：控制是否显示刻度。线的颜色：轴线的颜色。标签显示：是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。网格线是否显示：是否显示轴网格线、轴网格线的类型和颜色设置。 y轴 Y轴：是否显示Y轴。最小值：设置坐标轴的最小值。最大值：设置坐标轴的最大值。轴线显示：控制是否显示轴线。刻度显示：控制是否显示刻度。线的颜色：轴线的颜色。标签显示：是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。网格线是否显示：是否显示轴网格线、轴网格线的类型和颜色设置。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-页面间交互:同项目不同页面之间的跳转

同项目不同页面之间的跳转当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。图1 页面一单击，保存页面后单击，发布页面。参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。图2 页面二图3 页面三在页面一中，选中玫瑰花饼图，单击组件上方的，设置玫瑰花饼图和页面二之间的交互。图4 与页面二之间的交互页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。内部页面：选择待跳转的具体页面。“页面类型”设置为“内部页面”时，才显示该配置。外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。“页面类型”设置为“外部页面”时，才显示该配置。页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。设置页面参数：支持设置为“固定参数”和“变量参数”，设置为“变量参数”时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为“跳转页面URL?参数名=参数值”。图5 设置为固定参数图6 设置为变量参数图7 跳转页面地址中会带上设置的参数在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。图8 与页面三之间的交互单击，保存页面后单击，预览效果。图9 单击玫瑰花饼图弹出页面二图10 单击基本饼图弹出页面三

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-页面间交互:跳转外部页面

跳转外部页面外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的连接地址。参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。参考使用空白画布新建页面中操作，新建一个空白页面，并拖入玫瑰花饼图。选中玫瑰花饼图，单击组件上方的，进入交互设置页面。设置本页面与外部页面之间的跳转。图11 设置与外部交付的页面外部页面由于同源策略限制，暂不支持弹窗打开。在填写外部页面地址时，需要将“http://”或“https://”请求头也一并填入。单击，保存页面后单击，预览效果。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-HTTP连接器:在组件中使用数据集

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-基本柱图:指标

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-基本柱图:坐标轴

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-基本柱图:参考线

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-基本柱图:图例

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-基本柱图:图形

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-散点图:坐标轴

坐标轴坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。图9 坐标轴 x轴 X轴：是否显示X轴。 X轴坐标轴类型：设置X轴坐标轴类型，支持连续数据、类目轴和时间轴。坐标轴分割段数：设置X轴坐标轴段数。最大值：X轴线标签数据的最大值。最小值：X轴线标签数据的最小值。坐标轴名称：设置X轴坐标轴显示名称。坐标轴名称字体：坐标轴字体、颜色、大小设置。刻度标签旋转的角度：设置刻度标签旋转的角度。轴线显示：是否显示轴线。刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。刻度标签字体：设置标签的字体、颜色和大小。网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。 y轴 Y轴：是否显示Y轴。 Y轴坐标轴类型：设置Y轴坐标轴类型，支持连续数据、类目轴和时间轴。最大值：Y轴线标签数据的最大值。最小值：Y轴线标签数据的最小值。坐标轴名称：设置X轴坐标轴显示名称。坐标轴名称字体：坐标轴字体、颜色、大小设置。轴线显示：是否显示轴线。刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。刻度标签字体：设置标签的字体、颜色和大小。网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-散点图:图例

图例图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。图6 图例显示图例：是否显示图例。图例文字内容来源于数据模型下“s”的取值。图例标记：设置图例小图标形状和图例列表布局朝向。图例宽高：设置图例的宽度和高度。图例间隔：设置图例之间的间隔。字体：设置图例的字体、颜色和大小。文字风格：设置图例文字的风格，支持正常、斜体和倾斜体。图例位置(左)：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。左间距：图例到散点图组件左侧距离占组件高度。上间距：图例到散点图组件顶部距离占组件高度。图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。自定义图例显示：开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-散点图:参考线

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-散点图:图形

图形图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。图5 图形颜色：设置图表中图形的颜色。统一配置标记图形：设置标记的图形，如圆形、矩形、三角形等。数据标签：是否显示数据标签，支持设置标签颜色。数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。数据系列系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。显示名称：自定义图表中系列的显示名称。标记图形：设置标记的图形样式，如圆形、矩形、三角形等。标记大小：设置标记的大小。颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。颜色：设置标记的颜色。边框颜色：设置标记边框颜色。图形透明度：散点图散点的透明度，取值0~1。数据标签：显示散点对应的数值标签。图表标注和标线最大值：显示散点数据的最大值。图表标注和标线最小值：显示散点数据的最小值。图表标注和标线平均值：显示散点数据的平均值。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-Iframe布局框:卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-气泡图:图例

图例图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。图6 图例显示图例：是否显示图例，图例文字内容来源于数据模型下“s”的取值。图例标记：设置图例小图标形状和图例列表布局朝向。图例宽高：设置图例的宽度和高度。图例间隔：设置图例之间的间隔。字体：设置图例的字体、颜色和大小。文字风格：设置图例文字的风格，支持正常、斜体和倾斜体。图例位置(左)：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。上间距：图例到气泡图组件顶部距离占组件高度。图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。自定义图例显示：开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

ASTRO大屏应用 ASTROCANVAS

共100000条

undefined

意见反馈

0/200

提交取消

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

华为云用户手册

7*24

备案

专业服务

退订

建议反馈

售前咨询热线