华为云用户手册

ASTRO大屏应用 ASTROCANVAS-如何进行版本回退:操作步骤

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-初识开发页面:页面开发流程

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-日期选择器:卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-日期选择器:配置

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-时间轴:图形

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-组件自定义事件实现:注册自定义事件

注册自定义事件自定义事件在{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 自定义事件中，暴露给全局变量的内容。

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-如何自定义动作:自定义动作参数说明

自定义动作参数说明在自定义动作中，支持直接使用的参数如下： eventParam：组件传递出的参数。以日期选择器组件为例，介绍如何获取eventParam。在页面中，拖入一个日期选择器组件到画布中。图2 拖拽日期选择器到画布中选中日期选择器，单击，进入交互设置页面。按照下图，设置自定义动作。图3 设置自定义动作 /* * 可以像示例这样获取到组件对象，然后编写js代码 * 示例中表示，触发当前事件后，会隐藏组件widget16 * 帮助文档：https://support.huaweicloud.com/usermanualcanvas-astrozero/astrozero_05_7025.html * 可以直接使用的参数 * eventParam: 组件传递出的参数 * data: 交互动作信息对象 * $pageStore: 保存页面中全局变量的对象 * 你可以用$pageStore.setItems([{key:'id',value:'123'}])来批量更新全局变量 */ // {widget16}.hideWidget() console.log(eventParam); console.log(data); console.log($pageStore); 单击页面上方的，保存页面。单击，在预览页面，设置日期选择器的开始时间和结束时间。图4 预览效果设置完成后，按F12，在“Console”页签，即可获取查看eventParam。图5 eventParam data：保存最详细的动作信息对象。图6 查看data $pageStore：保存页面中全局变量的对象。如果在全局变量中，配置了一个field变量，并设置默认值为1。在自定义动作中，通过打印$pageStore（如图3），可以获取到全局变量。图7 定义全局变量field 图8 查看$pageStore $pageStore.setItems([{key:'id',value:'123'}])：批量更新全局变量。其中，key为全局变量名，value为全局变量的值。图9 全局变量

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-如何自定义动作:获取组件对象并操作组件

获取组件对象并操作组件获取组件。在“图层”页面，选中日期选择器组件。图10 选中日期选择器组件将鼠标悬浮在日期选择器上，组件名称即为组件ID。图11 获取组件ID 操作组件。获取到组件ID后，可以通过AstroCanvas提供的API来操作组件，如显示/隐藏组件。关于API的详细介绍，请参见内置API一览表。 // 显示组件 {widget2}.showWidget(); // 隐藏组件 {widget2}.hideWidget();

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-渐变色饼图:图例

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-渐变色饼图:图形

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-渐变色饼图:卡片

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-仪表盘:卡片

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

ASTRO大屏应用 ASTROCANVAS 组件介绍
ASTRO大屏应用 ASTROCANVAS-仪表盘:图形

图形图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。图6 图形表盘设置：展开或收起表盘，设置为展开时，需设置如下参数。起始角度：设置表盘的起始角度。结束角度：设置表盘的结束角度。区间最小值：设置表盘的区间最小值。区间最大值：设置表盘的区间最大值。分段个数：设置表盘的分段个数。半径(%)：设置表盘的半径大小。横坐标(%)：设置表盘的横坐标。纵坐标(%)：设置表盘的纵坐标。宽度：设置表盘的边框宽度。阴影颜色：设置表盘边框阴影颜色。阴影大小：设置表盘边框阴影大小。指针长度(%)：设置表盘指针的长度。指针宽度：设置表盘指针的宽度。指针颜色：设置表盘指针的颜色。指针固定点：是否显示指针的固定点。设置为显示时，支持设置固定点的大小、颜色等。图7 指针固定点固定点大小：设置指针固定点的大小，取值范围为[0.0, 100.0]。固定点颜色：设置指针固定点的颜色。固定点边线宽：设置指针固定点边框的线宽。固定点边线颜色：设置指针固定点边框的颜色。单位设置：是否显示单位。设置为显示时，支持设置单位、水平相对位置、垂直相对位置、单位字体等。详情设置：是否显示详情。设置为显示时，支持设置详情水平相对位置，详情垂直相对位置、详情字体等。刻度设置：是否显示刻度。设置为显示时，支持设置标签与刻度线距离、刻度标签字体、背景颜色、内边距等。轴线分段颜色：单击“轴线分段颜色”，可新增分段，支持设置轴线的位置和默认颜色。

ASTRO大屏应用 ASTROCANVAS 组件介绍
ASTRO大屏应用 ASTROCANVAS-select:配置示例

配置示例 select配置示例如下，配置后效果如图1所示。 { type: 'select', name: 'commProps.mySelect', value: 'Border', label: { zh_CN: '边框', en_US: 'Border' }, options: [{ value: 'Full', label: { zh_CN: '全边框', en_US: 'Full' } }, { value: 'Corner', label: { zh_CN: '角边框', en_US: 'Corner' } }, { value: 'No Border', label: { zh_CN: '无边框', en_US: 'No Border' } } ] } 图1 配置后效果

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

坐标轴坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。图10 坐标轴 x轴 X轴：是否显示X轴。轴标题：X轴标题。字体：坐标轴字体、颜色、大小设置。标题偏移：标题相对于轴线的偏移。标题旋转：标题旋转角度。轴线：是否显示轴线，支持设置轴线颜色。刻度：是否显示刻度。刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。标签行为：标签字数过多时是否进行处理，包括标签字数过多换行、标签字数过多省略和标签字数过多不做处理。单行字数：设置标签单行显示的文字个数。“标签行为”设置为“标签字数过多换行”或“标签字数过多省略”时，才需要配置。标签旋转：标签旋转角度。网格线：是否显示网格线。反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。轴标题：Y轴标题。字体：坐标轴字体、颜色、大小设置。标题偏移：标题相对于轴线的偏移。标题旋转：标题旋转角度。轴线：是否显示轴线，支持设置轴线颜色。刻度：是否显示刻度。刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。标签旋转：标签旋转角度。网格线：是否显示网格线。边界：是否自定义边界。自定义时如果最小值输入为数据最大值时，图表y轴起始值为最大值一半。左Y轴：设置左侧Y轴的边界范围。“边界”选择“自定义”时设置该参数。右Y轴：设置右侧Y轴的边界范围。“边界”选择“自定义”时设置该参数。最小间隔：坐标轴最小间隔大小。“边界”选择“自定义”时设置该参数。左Y轴单位：设置左侧Y轴的单位。右Y轴单位：设置右侧Y轴的单位。反转：是否对轴数据进行反转。标签展示：设置标签展示为“默认”或“计数单位”。

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

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

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

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-折柱图:图例

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-折柱图:图形

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

ASTRO大屏应用 ASTROCANVAS
ASTRO大屏应用 ASTROCANVAS-多折线图:坐标轴

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

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

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

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

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

ASTRO大屏应用 ASTROCANVAS
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-如何通过全局变量，实现组件数据的动态变化:操作步骤

操作步骤参考关系型数据库数据源中操作，新建关系型数据库数据源。图1 新建关系型数据库数据源参考关系型数据库中操作，新建关系型数据库数据集（新建变量value）。图2 新建关系型数据库数据集新建全局变量。参考使用空白画布新建页面中操作，新建大屏空白页面。在大屏开发页面，单击，新建全局变量，如hotSelect。图3 新建全局变量hotSelect 在画布中，拖入地图组件和下拉选择框组件。配置地图组件。选中组件，单击组件上方的，设置组件数据来源。在全局变量中，选择3中创建的全局变量hotSelect。图4 选择全局变量hotSelect 在组件预览中，从表格字段中，拖拽对应的字段到配置中。设置完成后，单击“保存”。选择地图组件，单击组件上方的，显示热力图层，数据标题设置为“子公司完成率”，显示类型设置为“区间显示”，并设置填充颜色。配置下拉选择框组件。选中组件，单击组件上方的，进入组件数据配置页面。数据类型选择“静态数据”，并输入如下示例数据。 { "dataValue": [{ "value": "子公司A完成率", "label": "子公司A完成率" }, { "value": "子公司B完成率", "label": "子公司B完成率" }, { "value": "子公司C完成率", "label": "子公司C完成率" } ] } 其中，“value”字段需要和数据列名保存一致。设置完成后，单击“保存”。配置下拉选择框交互动作。选中下拉选择框组件，单击组件上方的，进入组件交互设置页面。在“作为触发器”中，单击“+ 交互事件”，选择“当选中选项时”。在“响应动作”中，单击“+ 响应动作”，选择“赋值全局变量”。在“动作详情”中，选择3中定义的全局变量。图5 选择全局变量单击“确定”后，单击“完成”。保存页面后，单击，预览效果。图6 效果预览

ASTRO大屏应用 ASTROCANVAS

共100000条

undefined

意见反馈

0/200

提交取消

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

华为云用户手册

7*24

备案

专业服务

退订

建议反馈

售前咨询热线