进度条

卡片

卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。

配置

在配置中，设置组件的模板、是否显示标题等。

图6 配置

• 参考模板：系统预置的进度条模板，单击默认或参考配色模板可进行切换。
• 组件标题
  • 设置标题：是否显示组件标题。
  • 内容：设置标题内容。
  • 标题离容器上边距：标题距离组件上方的距离。
  • 标题离容器左边距：标题距离组件左边的距离。
  • 字体：设置标题的字体、颜色和大小等。

图形

图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。

图7 图形

• 颜色：设置图表中，图形的颜色。
• 统一配置
  • 进度条图案设置：可设置为“柱形”或“电池”。
  • 数值字体：设置数值的字体、大小和颜色等。
  • 数值显示位置：设置数值显示位置，如上、下等。
  • 显示内容宽占比：设置显示内容宽度占比。
  • 数值文本横向间距：设置数值文本横向间距。
  • 柱条边框圆角：设置柱条的边框圆角。
  • 进度条宽度：设置进度条的宽度。
  • 显示数值：进度条上是否显示数值。
  • 显示占比：进度条上是否显示占比。
  • 小数点位数：进度条上显示的数值小数点位数。
• 数据系列
  • 颜色类型：可设置为“单色”或“渐变色”，选择颜色可改变柱状条的颜色。
  • 进度条宽度：进度条的宽度，默认为10px。
  • 柱条边框圆角：进度条边框圆角配置，取值为“0”时为直角，“100”为圆角。
  • 显示数值：进度条上是否显示数值。开启后，支持设置数值颜色、文字大小和文字粗细。
  • 显示占比：进度条上是否显示占比。开启后，支持设置前缀、后缀和数值显示位置等。
  • 显示内容宽度占比：设置进度条上显示内容宽度占比。

提示

提示（悬浮提示）主要用于展示可视化图表组件，在具体维度节点的具体指标展示。

图8 提示

图9 设置提示效果

• 显示提示：开启后，在预览图表时，鼠标放在对应的序列上会显示提示信息，如图9。
• 特征标记：提示框显示的内容，可以显示系列名、数据名和数据值，也可以只显示其中的某一个或两个。

坐标轴

在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。

图10 坐标轴

• x轴
  • X轴：是否显示X轴。
  • 轴线显示：是否显示轴线。打开后需要设置轴线颜色。
  • 刻度显示：是否显示刻度。
  • 刻度标签显示：是否显示刻度标签。打开后需要设置刻度标签字体颜色、大小、粗细。
  • 反转：是否对轴数据进行反转。
  • 网格线(需设置对应轴显示)：是否显示轴网格线、轴网格线的类型和颜色设置。
• y轴
  • Y轴：是否显示Y轴。
  • 轴线显示：是否显示轴线，打开后可设置轴线颜色。
  • 刻度显示：是否显示刻度。
  • 刻度标签显示：是否显示刻度标签。打开后可设置刻度标签字体颜色、大小、粗细。
  • Y轴单位：设置Y轴的单位。
  • 反转：是否对轴数据进行反转。
  • 柱形阴影：是否显示柱形阴影，打开后可设置阴影颜色、显示数据/占比、水平/垂直偏移量等。
  • 网格线(需设置对应轴显示)：是否显示轴网格线、轴网格线的类型和颜色设置。
  • 刻度标签旋转的角度：设置Y轴刻度标签的旋转度数，取值范围为[-90, 90]。
    图11 刻度标签旋转的角度
    

参考线

参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。

图12 参考线

• 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。
• Y轴参考线
  • Y轴参考线：是否显示Y轴参考线。
  • 参考线：设置已有参考线的颜色和线型，单击“新增Y轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。
• X轴参考线
  • X轴参考线：是否显示X轴参考线。
  • 参考线：设置已有参考线的颜色和线型，单击“新增X轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。

数据

在数据中，设置进度条组件的数据来源，更多介绍请参见数据接入。

交互

在交互中，配置进度条组件与其他组件或页面之间的交互能力。交互设置更多介绍，请参见交互设置。