← All templates

雷达图 <Radar />

5–8 条轴的蛛网图,第一组用强调色填充,第二组为灰色虚线,逐条展开时第二组后出现。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 多维画像对比
Component
Radar · #radar

Good for

  • 两个对象在 5–8 个维度上的画像对比
  • 各维度单位相同(例如都是百分比或评分)

Avoid when

  • 维度单位不同:用 CompareTable
  • 对象超过两个:用 BarChart 分组

Content limits

1axes 5–8 条,每条 ≤ 6 字
2series 1–2 组,name ≤ 8 字
3notes 1–3 条:key ≤ 8 字,text ≤ 30 字

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
axes · requiredstring[]维度
series · required{ name, values }[]1–2 组
maxnumber外圈数值
unitstring单位
decimalsnumber小数位
notes{ key, text }[]右侧解读

Example

<Radar kicker="对比" title="…" axes={['煤电', '油气', '核电', '水电', '风电', '太阳能']} series={[{ name: '中国', values: […] }, { name: '德国', values: […] }]} max={60} unit="%" />