华为云Astro大屏应用
华为云Astro大屏应用
链接复制成功!
仪表盘
仪表盘是指通过仪表的特殊展示方式,对数据进行展示。
在大屏设计页面,从“全部组件 > 仪表盘”中,拖拽“仪表盘”组件至画布空白区域,如图1。
卡片
卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
图3 仪表盘卡片

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

- 组件标题
- 设置标题:是否显示组件标题。
- 内容:设置标题内容。
- 位置选择:设置标题的显示位置,支持左、右和中。
- 背景色:设置标题的背景颜色。
- 字体:设置标题字体、颜色和大小等。
- 提示框格式:设置提示框的格式,如“系列名称 数值 数据项名称”和“系列名称 数据项名称 数值”。
图形
图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。
图5 仪表盘图形

- 表盘设置:展开或收起表盘,设置为展开时,需设置如下参数。
- 起始角度:设置表盘的起始角度。
- 结束角度:设置表盘的结束角度。
- 区间最小值:设置表盘的区间最小值。
- 区间最大值:设置表盘的区间最大值。
- 分段个数:设置表盘的分段个数。
- 半径(%):设置表盘的半径大小。
- 横坐标(%):设置表盘的横坐标。
- 纵坐标(%):设置表盘的纵坐标。
- 宽度:设置表盘的边框宽度。
- 阴影颜色:设置表盘边框阴影颜色。
- 阴影大小:设置表盘边框阴影大小。
- 指针长度(%):设置表盘指针的长度。
- 指针宽度:设置表盘指针的宽度。
- 指针颜色:设置表盘指针的颜色。
- 指针固定点:是否显示指针的固定点。设置为显示时,支持设置固定点的大小、颜色等。
图6 指针固定点
- 固定点大小:设置指针固定点的大小,取值范围为[0.0, 100.0]。
- 固定点颜色:设置指针固定点的颜色。
- 固定点边线宽:设置指针固定点边框的线宽。
- 固定点边线颜色:设置指针固定点边框的颜色。
- 单位设置:是否显示单位。设置为显示时,支持设置单位、水平相对位置、垂直相对位置、单位字体等。
- 详情设置:是否显示详情。设置为显示时,支持设置详情水平相对位置,详情垂直相对位置、详情字体等。
- 刻度设置:是否显示刻度。设置为显示时,支持设置标签与刻度线距离、刻度标签字体、背景颜色、内边距等。
- 轴线分段颜色:单击“轴线分段颜色”,可新增分段,支持设置轴线的位置和默认颜色。
数据
在数据中,设置仪表盘组件的数据来源,更多介绍请参见数据接入。
交互
在交互中,配置仪表盘与其他组件或页面之间的交互能力。更多交互介绍,请参见交互设置。
父主题: 组件介绍