云服务器内容精选

华为云首页用户手册

大屏组件

智能数据洞察 DATAARTS INSIGHT-制作交互:样式

样式尺寸位置 W：设置图表的宽，单位为px。 H：设置图表的高，单位px。 X：设置图表在画布中的位置。单位为px。 Y：设置图表在画布中的位置。单位为px。不透明度：设置图表在画布上的透明度，可通过滑动条进行设置，也可手动输入百分比，比例越大透明程度越低。图1 尺寸位置全屏全局样式全屏显示：支持通过url和本地上传图片。退出全屏：支持通过url和本地上传图片。背景色：设置全屏功能的背景色。圆角：设置全屏的圆角。显示方式：支持总是和鼠标上移。搜索样式提示信息：支持对文本、字体大小、颜色的设置。字号：支持设置搜索的字号。字体粗细：支持设置搜索字体的粗细。字体颜色：支持设置搜索字体的颜色。背景色：支持设置搜索的背景色。搜按钮颜色：支持设置搜索按钮的颜色。边框：支持设置边框的宽度、颜色、边框类型。边框类型支持实线、虚线、点划线。单选下拉样式背景色：设置单选下拉的背景颜色。边框：支持对边框的宽度、圆角、颜色、类型的设置。箭头：支持对箭头的颜色、大小、右边距的设置。字体样式：支持对字体的字号、字体粗细、字体颜色、卡片圆角度、背景色的设置。结果框样式最大高度：设置单选下拉的最大高度。字体大小：设置单选下拉的字体大小。字体粗细：设置单选下拉的字体的粗细。字体颜色：设置单选下拉的字体颜色。选项悬浮颜色:支持设置单选下拉的选项悬浮色。选项选中颜色：支持设置单选下拉的选项选中的颜色。背景色：支持设置单选下拉的背景色。选择配置：勾选“允许取消选择”，单选下拉允许取消选择，且提示文本可设置；未勾选“允许取消选择”，单选下拉不允许取消选择，提示文本不可设置。如果没有设置初始值、未勾选选择配置，则默认填入绑定字段的第一行数据；如果绑定的数据集无数据的情况下，单击下拉框展示“暂无数据”。初始值设置：支持单选下拉设置初始值，设置方式有固定和动态获取。固定：当初始化值方式为固定时，可设置单选下拉组件的初始字段。不填写初始字段、允许取消选择，则为不设置默认值。不填写初始字段、不允许取消选择，则默认填入绑定字段的第一行数据。动态获取：当初始化值方式为动态获取时，可设置单选下拉组件的字段索引。填入索引值将用于动态获取初始值。填入0则默认选中第一行数据。索引值超出数据范围则取最后一行数据。不允许输入负数。多选下拉框样式样式背景色：设置多选下拉的背景颜色。边框：支持对边框的宽度、圆角、颜色、类型的设置。箭头：支持对箭头的颜色、大小、右边距的设置。卡片样式：支持对字体的字号、字体粗细、字体颜色、卡片圆角度、背景色的设置。结果框样式最大高度：设置多选下拉的最大高度。初始值设置初始化值：支持多选下拉框设置初始值，设置方式有固定和动态获取。固定：当初始化值方式为固定时，可设置单选下拉组件的初始字段，多个字段之间用分号。动态获取：当初始化值方式为动态获取时，可设置多选下拉组件的字段索引，多个索引之间用分号。填入索引值将用于动态获取初始值，填入0则默认选中第一行数据。索引值超出数据范围则取最后一行数据。索引值去重：如果填入两个重复的索引值，则以单个索引值为初始化值；填入多个索引值，超出实际数据范围，根据索引值规则，显示数据围内的字段。提示文本：设置下拉选项的提示文本。文本大小：用户可自定义设置。 Tab列表样式全局样式字体：设置Tab列表的字体。行数：设置Tab列表的行数时，输入值不能小于1。边框宽度：设置Tab列表的宽度，输入值不能小于0。选择类型：设置Tab列表的类型，支持单选多选的设置。 Tab配置：可对tab的内容以及值进行设置。标签配置：字号：字号设置范围10~100之间。字体颜色：用户自定义标签颜色。字体粗细：字体粗细类型Normal、Bold、Bolder、Lighter。背景颜色：标签列表的背景颜色可自定义设置。圆角半径：标签的圆角半径可设置，取值范围0~50。选中文字/背景/悬浮边框颜色：用户可自定义设置颜色。单轮轮播：轮播开关：支持设置轮播开关设置。轮播间隔：轮播间隔用户可设置，取值范围不能小于3000。

智能数据洞察 DATAARTS INSIGHT 大屏组件
智能数据洞察 DATAARTS INSIGHT-制作交互:交互组件类型说明

交互组件类型说明表1 交互组件类型说明数据要素全屏通过单击控制大屏的全屏功能。无。 iFrame 在大屏中添加iFrame内容。链接。搜索在大屏中添加搜索框。控件变量。单选下拉下拉菜单中进行选择，用于数据选项较多的场景。选项/维度、控件变量。 Tab列表通过添加Tab控件，您可以在大屏中以标签页的形式展示多个大屏。控件变量。多选下拉框下拉菜单中进行选择，用于数据选项较多的场景。选项/维度、控件变量。

智能数据洞察 DATAARTS INSIGHT 大屏组件
智能数据洞察 DATAARTS INSIGHT-制作媒体:样式

样式本章节介绍媒体组件相关的样各配置项的含义。尺寸位置 W：设置图表的宽，单位为px。 H：设置图表的高，单位px。 X：设置图表在画布中的位置。单位为px。 Y：设置图表在画布中的位置。单位为px。不透明度：设置图表在画布上的途明度，可通过滑动条进行设置，也可手动输入百分比，比例越大透明程度越低。全局样式--图片图片：选择图片，您可以通过如下三种方式加载图片到大屏中。在“图片”后显示“url”的框中输入图片的地址。单击“图片”下方的虚线框，选择图片。直接拖动图片至“图片”下方的虚线框中。图片选择后，您也可以进行编辑和删除操作。单击图片区域的可以删除当前图片，单击可以修改当前图片。请合理谨慎使用背景图片功能，该功能可能是你的背景图数据泄露。缩放模式：单击下拉选项，可以设置图片的缩放模式。可设置为默认、按比例缩放、裁剪缩放、拉伸缩放。图片位置：单击下拉选项，可以设置图片的位置。可设置为居中对齐、左对齐、右对齐、顶对齐、底对齐。全局样式--轮播图字体：设置轮播图文字的字体。字号：轮播图文字描述的字体大小。输入字体大小不能为空，且输入值在10到100之间。动画--轮播图停顿：支持设置停顿的时间，输入值不能小于0。速度：支持设置动画的速度，输入值不能小于0。特效：支持设置为水平滚动和垂直滚动。图片--轮播图缩放模式：支持设置为拉伸缩放、按比例缩放、保持原图大小、裁剪缩放。描述--轮播图背景色：支持设置轮播图的背景色。字体颜色：支持设置图片描述字体颜色。字体粗细：设置描述图片的字体粗细。长度（%）：设置描述图片的字体框长度，输入值必须在0到100之间。宽度（%）：设置描述图片的字体框宽度，输入值必须在0到100之间。上边距（px）：设置描述图片的字体框宽度上边距（px）。左边距（px）：设置描述图片的字体框宽度左边距（px）。对齐方式：支持设置为左侧对齐或右侧对齐。圆点--轮播图圆点颜色：设置轮播圆点的颜色。当前颜色：轮播圆点当前的颜色。自动播放--视频显示/隐藏自动播放：单击“显示自动播放”左侧的勾选框，表示显示自动播放，表示隐藏自动播放。循环播放--视频显示/隐藏循环播放：单击“显示循环播放”左侧的勾选框，表示显示循环播放，表示隐藏循环播放。控制条--视频显示/隐藏控制条：单击“显示控制条”左侧的勾选框，表示显示控制条，表示隐藏控制条。静音--视频显示/隐藏静音：单击“显示静音”左侧的勾选框，表示显示控静音，表示隐藏静音。音量调节--FLV视频流敬请期待。

智能数据洞察 DATAARTS INSIGHT 大屏组件
智能数据洞察 DATAARTS INSIGHT-制作媒体:图表类型与说明

图表类型与说明每种图表都有其适用场景和数据要素（即，构成图表的字段）。下面为您介绍各种类型图表的使用场景、数据要素和样例展示。表1 图表适用场景类型类型说明数据要素图片图片图片组件主要用于添加图片到报表页面进行组合展示，常用于添加页面补充说明配图或者添加 LOG 图片等进行页面美观度整体提升。类别轴/维度轴值/度量颜色图例轮播图轮播图是指多张图片在同一个图片窗口中轮播，实现轮播动画效果。类别轴/维度轴值/度量颜色图例视频视频视频是媒体组件的一种，支持自定义视频的URL地址、视频播放属性、播放器的外观属性等，支持mp4格式的视频，能够在可视化应用中添加视频播放器来播放您的视频。链接 FLV视频流功能同视频组件，支持播放FLV视频格式。链接

智能数据洞察 DATAARTS INSIGHT 大屏组件
智能数据洞察 DATAARTS INSIGHT-制作常用图表:配置样式

配置样式本章节介绍图表组件相关的样各配置项的含义。尺寸位置 W：设置图表的宽，单位为px。 H：设置图表的高，单位px。 X：设置图表在画布中的位置。单位为px。 Y：设置图表在画布中的位置。单位为px。不透明度：设置图表在画布上的途明度，可通过滑动条进行设置，也可手动输入百分比，比例越大透明程度越低。图12 尺寸位置--线状图全局样式字体：设置图表中文字的字体，线状图、折线柱图、双轴折线柱图、台阶图、饼状图、玫瑰图、柱状图、水平柱状图支持设置。近似曲线：单击右侧的勾选框，可设置成近似的曲线。仅线状图支持设置数据点位置：设置台阶图数据点位置，支持设置为起点、中点、终点。数据展示：设置玫瑰图的展示样式，支持半径和面积设置。图13 全局样式-线状图示例柱子样式折线柱图、双轴折线柱图、柱状图、水平柱状图支持设置。柱子宽度：设置柱子宽度，可以通过输入数值或单击“-”或“+”调节。输入值不能为空，输入值必须在1到100之间。柱子圆角度：设置柱子圆角度，可以通过输入数值或单击“-”或“+”调节。输入值不能为空，输入值必须在0到100之间。系列间距：设置系列间距，可以通过输入数值或单击“-”或“+”调节。输入值不能为空，输入值必须在-100到100之间。边距线状图、折线柱图、双轴折线柱图、台阶图、柱状图、水平柱状图支持设置。顶部：设置图表与图层顶部的间距，可以通过输入数值或单击“-”或“+”调节。底部：设置图表与图层顶部的间距，可以通过输入数值或单击“-”或“+”调节。左侧：设置图表与图层左侧的间距，可以通过输入数值或单击“-”或“+”调节。右侧：设置图表与图层右侧的间距，可以通过输入数值或单击“-”或“+”调节。 x轴线状图、折线柱图、双轴折线图、台阶图、柱状图、水平柱状图y轴与x轴支持设置且设置参数一致。显示/隐藏x轴：单击“x轴”右侧的勾选框，表示显示x轴，表示隐藏x轴。文本：设置x轴的文本样式，包括字号、字体颜色、字体粗细、字体粗细。线状图还支持设置角度、数据类型、分割数、轴线颜色。数据类型：坐标轴对应的字段的数据类型，可以选择数值型、类目型、时间型。分割数：当“数据类型”为“数值型”或“时间型”时，显示标签的数量会根据设置的“分割数”做自适应显示。当“数据类型”配置为其他值时，该配置项不生效。数据类型：坐标轴对应的字段的数据类型，可以选择数值型、类目型、时间型、log型。轴标签：支持是在轴标签的角度。输入值不能为空，输入值在-90到90之间。双轴折线图、折线柱图支持设置轴标签的角度。柱状图支持设置轴标签的字号、颜色、字体粗细、角度、数据类型、标签间隔、最小标签、最大标签设置。坐标轴：设置x轴的颜色。显示/隐藏网格线：单击“网格线”右侧的勾选框，表示显示x轴，表示隐藏网格线。线状图支持线条格式设置，设置网格线的线条格式，其中包含实线、虚线、点划线。网格线的颜色也可配置。图14 x轴-线状图示例 y轴线状图、折线柱状图、柱状图、台阶图、双轴折线图柱图y1、y2轴、水平柱状图x轴与y轴支持设置且设置参数一致。显示/隐藏y轴：单击“y轴”右侧的勾选框，显示/隐藏网格线：单击“网格线”右侧的勾选框，表示显示y轴，表示隐藏y轴。文本：设置y轴的文本样式，包括字号、字体颜色、字体粗细、角度。轴标签：设置y轴的标签，支持对显示格式、最小值、最大值、分割数设置。显示格式支持设置自动、取整、保留一位小数、保留两位小数、保留三位小数、保留四位小数、保留五位小数。最小值支持自动取整和数据最小值。最大值支持自动取整和数据最大值。分割数输入值不能小于1。轴单位：设置y轴的单位和颜色。坐标轴：设置y轴轴线的颜色。显示/隐藏网格线：单击“网格线”右侧的勾选框，表示显示网格线，表示隐藏网格线。线条格式：设置网格线的线条格式，其中包含实线、虚线、点划线。网格线的颜色也可配置。图15 y轴-线状图图例线状图、折线图、双轴折线图、台阶图、柱状图、水平柱状图支持设置。显示/隐藏图例：单击“图例”右侧的勾选框，表示显示图例，表示隐藏图例。文本：设置图例的文本样式，包括字号、字体颜色、字体粗细。布局：设置图例的位置，支持顶部居中、顶部居左、顶部居右、底部居中、底部居左、底部居右。柱状图支持方向、左右间距、上下间距、图例间隔设置。方向支持水平和垂直设置。左右间距、上下间距、图例间隔输入不能为空，默认值分别为5、5、10。折线柱图和双轴折线图支持左右间距、上下间距、图例间隔设置。左右间距、上下间距、图例间隔输入不能为空，默认值分别为5、5、10。图16 图例-线状图示例动画线状图、折线柱图、双轴折线图、台阶图、饼状图、环形进度图、柱状图、水平柱状图支持设置。显示/隐藏提示信息：单击“动画”右侧的勾选框，表示开启图表的动画效果；表示预不开启图表的动画效果。入场动画：组件第一次渲染动画的时长，单位为ms。动画效果：动画的缓动效果，系统提供多种常见的动画缓动效果供您选择。各系列依次动画：开启后，各系列依次动画显示。未开启时，所有的系列同时动画显示。更新动画：组件数据更新时的动画时长，单位为ms。是否从之前位置开始：开启后，组件数据更新时，从上一个数据的位置开始播放动画；关闭后，组件数据更新时，从初始位置开始播放动画。图17 动画-线状图示例系列线状图、折线柱图、双轴折线图、台阶图、饼状图、玫瑰图、柱状图、水平柱状图支持设置。配色方案：支持默认色、经典、舒适、智能、数据、艺术的配色方案。图18 配色方案系列：支持对系列颜色的配置。图19 系列颜色配置标签属性饼状图、玫瑰图支持设置。显示/隐藏标签属性：单击“显示标签属性”左侧的勾选框，表示显示，表示隐藏。标签距中间：设置标签距中间的距离。轴距长度：设置标签的轴距长度。字号：设置标签字体大小。颜色：设置标签字体的颜色。字体粗细：设置标签的字体粗细。输入不能为空，且输入值在0到100之间。显示/隐藏数据值：单击“数据值”右侧的勾选框，表示显示，表示隐藏。显示/隐藏比例显示：单击“比例显示”右侧的勾选框，表示显示，表示隐藏。边线选项仅饼状图支持设置。颜色：设置边线的颜色。宽度：设置边线的宽度，输入不能为空，且输入值在0到10之间。途明度：设置边线的透明度。输入值不能为，且输入值必须在0到1之间。饼图属性饼状图和玫瑰图支持设置。内半径：设置内半径，输入不能为空，且输入值在0到100之间。外半径：设置外半径，输入不能为空，且输入值在0到100之间。水平位置：设置水平位置，输入不能为空，且输入值在0到100之间。垂直位置：设置垂直位置，输入不能为空，且输入值在0到100之间。视觉映射仅玫瑰图支持设置。显示/隐藏视觉映射：单击“视觉映射”左侧的勾选框，表示显示，表示隐藏。最大值：设置视觉映射的最大值。最小值：设置视觉映射的最小组。映射类型：支持连续型和分段型（等值）设置。方向：支持垂直和水平设置。宽度：的设置宽度，输入不能为空，且输入值在0到50之间。高度：设置映射高度，输入不能为空，且输入值在1到200之间。左侧：设置映射左侧，输入不能为空，且输入值在0到100之间。底部：设置映射底部，输入不能为空，且输入值在0到100之间。文字：支持设置颜色和字号。进度条仅环形进度条支持设置。内半径：设置内半径，输入不能为空，且输入值在0到100之间。外半径：设置外半径，输入不能为空，且输入值在0到100之间。背景色：设置进度条的背景色。进度条颜色：设置进度条的颜色。占比仅环形进度条支持设置。显示/隐藏占比：单击“占比”左侧的勾选框，表示显示，表示隐藏。小数位：设置小数位，输入不能为空，且输入值在0到10之间占比文本：支持字体、数值颜色、数值字号、字体粗细的设置。偏移：支持水平偏移和垂直偏移的设置。

智能数据洞察 DATAARTS INSIGHT 大屏组件
智能数据洞察 DATAARTS INSIGHT-制作常用图表:图表类型与说明

图表类型与说明每种图表都有其适用场景和数据要素（即，构成图表的字段）。下面为您介绍各种类型图表的使用场景、数据要素和样例展示。表1 图表适用场景类型类型说明数据要素线状图线状图折线图用来展示在相等的时间间隔下数据的趋势走向。类别轴/维度轴值/度量颜色图例折线柱图折线柱图展示不同量级数据，支持常规线图柱图组合场景的数据展示。组合图中折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。组合图中柱状图，可以比较各组数据之间的差别。类别轴/维度轴值/度量颜色图例双轴折线柱图通过双轴展示不同量级数据。组合图中折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。组合图中柱状图，可以比较各组数据之间的差别。类别轴/维度主轴值/度量副轴值/度量颜色图例台阶图台阶图是一种连续的数据分布的图形表现形式。类别轴/维度轴值/度量颜色图例饼状图饼状图饼图常用于展示数据中各项的大小与各项总和的比例。类别轴/维度轴值/度量颜色图例玫瑰图玫瑰图展示各项数据间的比较情况，多适用于枚举型数据。类别轴/维度轴值/度量颜色图例环形进度条环形进度条可以直观地展现出某个指标的进度。进度值/目标值/度量柱状图柱状图柱图用来比较各组数据之间的差别，并且可以显示一段时间内的数据变化情况。类别轴/维度轴值/度量颜色图例水平柱状图与柱状图类似，条形图用横向的展示方式来比较数据间的大小以及各项之间的差距。类别轴/维度轴值/度量颜色图例折线柱图折线柱图展示不同量级数据，支持常规线图柱图组合场景的数据展示。组合图中折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。组合图中柱状图，可以比较各组数据之间的差别。类别轴/维度轴值/度量颜色图例双轴折线柱图通过双轴展示不同量级数据。组合图中折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。组合图中柱状图，可以比较各组数据之间的差别。类别轴/维度主轴值/度量副轴值/度量颜色图例

智能数据洞察 DATAARTS INSIGHT 大屏组件