分类条 / Category Bar

用于表示进度、表现或状态对比，适合展示构成比例。

无标识样式

带刻度的紧凑分类条。

05585100

示例代码

<CategoryBar data={data} showScale barHeight={6} />

带标识样式

显示分类标签与数值。

BIM55

GIS30

CAD15

05585100

示例代码

<CategoryBar data={data} showLabels showScale barHeight={6} />

分段评分

适合表示状态区间与等级。

0102040

示例代码

const data = [
  { label: "A", value: 10, color: "oklch(0.646 0.222 41.116)" },
  { label: "B", value: 10, color: "oklch(0.6 0.118 184.704)" },
  { label: "C", value: 20, color: "oklch(0.622 0.191 142.495)" },
]

<CategoryBar data={data} showScale barHeight={6} />

当前数值

标记当前所在区间位置。

07090100

示例代码

<CategoryBar
  data={statusData}
  showScale
  barHeight={6}
  currentValue={78}
/>

Loading dashboard...