排行榜一般反映指标在维度中的分布及排名顺序,简洁地展示TOP N的降序排行。例如,排行榜根据销售额从大到小的顺序展示TOP 10城市。本文为您介绍如何为排行榜添加数据并配置样式。

效果图

排行榜包含基础排行榜和占比滚动排行榜,效果图如下所示。效果图

配置数据

基础排行榜为例为您介绍排行榜的数据配置。
  1. 在组件库区域的图表中,找到基础排行榜并拖至画布中。排行榜
  2. 单击请选择数据集,并按照下图指引,添加数据。配置数据
您还可以对数据进行以下操作:字段设置

配置样式

基础排行榜为例为您介绍排行榜的样式配置。

位置和尺寸

您可以在配置区对组件进行如下设置:
  • 调整组件的对齐方式(①):支持左对齐、居中和右对齐等。
  • 调整组件的尺寸(②):以左上角为原点,设置X和Y轴的值,调整位置。
  • 调整组件的角度(③):设置旋转角度的值。
  • 调整组件的大小(④):设置W和H的值,调整组件的宽度和高度。
  • 锁定组件(⑤):锁定组件后,无法调整组件的大小。
位置和尺寸

行列设置

您可以在行列设置区域,进行如下设置:
  • 设置排行榜的行数、列数(①、②)。
  • 设置排行榜行、列间距值(③、④)以及行内的左、右边距(⑤,⑥)。
行列设置

序号

您可以在序号区域,设置序号的文本样式、图标大小、圆角半径、背景颜色以及Top 3的样式。序号设置

行标题

您可以在行标题区域,设置行标题的文本颜色、大小、粗体或斜体。设置行标题

指标

您可以在指标区域,进行如下操作:
  • 前缀后缀:设置主指标(①)和辅助指标(②)的前后缀显示名称(③、④)。
  • 最小宽度:设置指标与行标题之间的最小宽度(⑤)。
  • 文本:设置指标文本的颜色、大小、粗体或斜体。
指标

占比条

您可以在占比条区域,设置占比条的高度、占比条颜色和背景颜色。设置占比条

修饰图

您可以在修饰图区域,设置修饰图大小和圆角半径。修饰图

分割线

您可以在分割线区域,设置分隔线的高度、颜色和左右边距。设置分隔线

动画效果

您可以在动画效果区域,设置排行榜的动画效果。支持的操作如下:
  • 开启纵向滚动:设置排行榜纵向滚动的行数以及滚动的时间间隔(①、②)。
  • 开启行标题横向滚动:设置行标题横向滚动的速度以及滚动间距(③)。
  • 开启占比条流光效果:设置占比条流光效果的颜色以及时长(④)。
  • 开启分隔线流光效果:设置分隔线流光效果的颜色以及时长(⑤)。
动画配置项

条件格式

您可以在条件格式区域,设置排行榜度量的条件格式,说明如下:
  • 请选择系列:添加到指标/度量区域的度量项均可选择。
  • 快捷样式:从指定的样式中,设置标记图标和字体显示颜色。
  • 自定义样式:自定义文本和图标样式,并设置标记图标、范围值和字体显示颜色等。
  • 同步样式到:同步当前的条件格式到其他度量指标中。
条件格式