# 进度条 进度条是柱状图的一种，通过进度条可实现百分比展示能力，支持电池和柱状图两种展示形式。 在大屏设计页面，从"全部组件 \> 图表"中，拖拽"进度条"组件至画布空白区域，如[图1]。 图1进度条 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424149.png "点击放大") 图2边距样式说明 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184108.png) #### 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3进度条卡片 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123025996.png "点击放大") - 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击"清除样式"，可清除已设置的装饰样式。 - 背景 - 背景颜色：组件卡片的背景颜色。 - 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 - 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 - 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 - 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 - 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见[图2]），默认为0，即铺满整个组件。 - 图表背景：图表的背景颜色。 - 自定义标签：是否显示标签，支持设置标签的字体、标签水平方向偏移量和标签垂直方向偏移量。 - 布局：进度条（不包含组件标题）距离整个组件四边（上、下、左、右）的距离。 图4进度条布局 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184100.png) - 上边距：进度条到组件边框顶部的距离。 - 右边距：进度条到组件边框右侧的距离。 - 下边距：进度条到组件边框底部的距离。 - 左边距：进度条到组件边框左侧的距离。 #### 配置 在配置中，设置组件的模板、是否显示标题等。 图5进度条配置 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026024.png "点击放大") - 参考模板：系统预置的进度条模板，单击默认或参考配色模板可进行切换。 - 组件标题 - 设置标题：是否显示组件标题。 - 内容：设置标题内容。 - 标题离容器上边距：标题距离组件上方的距离。 - 标题离容器左边距：标题距离组件左边的距离。 - 字体：设置标题的字体、颜色和大小等。 #### 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6进度条图形 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184148.png "点击放大") - 颜色：设置图表中，图形的颜色。 - 统一配置 - 进度条图案设置：可设置为"柱形"或"电池"。 - 数值字体：设置数值的字体、大小和颜色等。 - 数值显示位置：设置数值显示位置，如上、下等。 - 显示内容宽占比：设置显示内容宽度占比。 - 数值文本横向间距：设置数值文本横向间距。 - 柱条边框圆角：设置柱条的边框圆角。 - 进度条宽度：设置进度条的宽度。 - 显示数值：进度条上是否显示数值。 - 显示占比：进度条上是否显示占比。 - 小数点位数：进度条上显示的数值小数点位数。 - 数据系列 - 颜色类型：可设置为"单色"或"渐变色"，选择颜色可改变柱状条的颜色。 - 进度条宽度：进度条的宽度，默认为10px。 - 柱条边框圆角：进度条边框圆角配置，取值为"0"时为直角，"100"为圆角。 - 显示数值：进度条上是否显示数值。开启后，支持设置数值颜色、文字大小和文字粗细。 - 显示占比：进度条上是否显示占比。开启后，支持设置前缀、后缀和数值显示位置等。 - 显示内容宽度占比：设置进度条上显示内容宽度占比。 #### 提示 提示（悬浮提示）主要用于展示可视化图表组件，在具体维度节点的具体指标展示。 图7进度条提示 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158305705.png "点击放大") - 显示提示：开启后，在预览图表时，鼠标放在对应的序列上会显示提示信息。 - 特征标记：提示框显示的内容，可以显示系列名、数据名和数据值，也可以只显示其中的某一个或两个。 #### 坐标轴 在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。 图8进度条坐标轴 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123025984.png "点击放大") - x轴 - X轴：是否显示X轴。 - 轴线显示：是否显示轴线。打开后需要设置轴线颜色。 - 刻度显示：是否显示刻度。 - 刻度标签显示：是否显示刻度标签。打开后需要设置刻度标签字体颜色、大小、粗细。 - 反转：是否对轴数据进行反转。 - 网格线(需设置对应轴显示)：是否显示轴网格线、轴网格线的类型和颜色设置。 - y轴 - Y轴：是否显示Y轴。 - 轴线显示：是否显示轴线，打开后可设置轴线颜色。 - 刻度显示：是否显示刻度。 - 刻度标签显示：是否显示刻度标签。打开后可设置刻度标签字体颜色、大小、粗细和刻度标签旋转的角度（Y轴刻度标签的旋转度数，取值范围为\[-90, 90\]）。 - Y轴单位：设置Y轴的单位。 - 反转：是否对轴数据进行反转。 - 柱形阴影：是否显示柱形阴影，设置为显示后可设置如下参数。 - 柱形阴影颜色：设置柱形阴影的背景颜色。 - 显示数字：柱形阴影上是否显示数值。 - 显示占比：柱形阴影上是否显示占比。设置为显示时，支持设置水平偏移、垂直偏移量和数字的字体、大小和颜色。 - 网格线(需设置对应轴显示)：是否显示轴网格线、轴网格线的类型和颜色设置。 #### 参考线 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。 图9进度条参考线 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158305709.png "点击放大") - 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。 - Y轴参考线 - Y轴参考线：是否显示Y轴参考线。 - 参考线：设置已有参考线的颜色和线型，单击"新增Y轴参考线"，可新增参考线。单击对应参考线后的"x"，可删除参考线。 - X轴参考线 - X轴参考线：是否显示X轴参考线。 - 参考线：设置已有参考线的颜色和线型，单击"新增X轴参考线"，可新增参考线。单击对应参考线后的"x"，可删除参考线。 #### 数据 在数据中，设置进度条组件的数据来源，更多介绍请参见[数据接入](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6143.html)。 #### 交互 在交互中，配置进度条组件与其他组件或页面之间的交互能力。交互设置更多介绍，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。