SxRadarChart (雷达图)
- Implemented
NextUI 扩展图表。专门针对雷达图场景优化的封装组件。
使用场景
- 多维度数据对比
- 能力评估图
- 产品特性对比
- KPI 指标展示
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data/Indicators生成默认配置。 - 每个指标需要定义名称和最大值。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持多边形和圆形两种雷达图形状。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，应为数值数组或包含 value/name 的对象。 |
| Implemented | Indicators |
IEnumerable<RadarIndicator>? |
null |
雷达指标配置，定义各维度名称和最大值。 |
| Implemented | Shape |
string |
"polygon" |
雷达图形状。可选: polygon（多边形）、circle（圆形）。 |
| Implemented | AreaStyle |
bool |
false |
是否填充面积。 |
| Implemented | Radius |
string |
"75%" |
雷达图半径，可以是像素值或百分比。 |
| Implemented | SeriesName |
string? |
null |
系列名称，用于图例显示。 |
| Implemented | Options (继承) |
object? |
null |
覆盖 ECharts 配置。 |
| Implemented | Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented | Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
RadarIndicator 类型
public class RadarIndicator
{
public string Name { get; set; }
public double Max { get; set; }
}
示例
基础雷达图
<SxRadarChart />
自定义指标
<SxRadarChart Data="@radarData" Indicators="@indicators" AreaStyle="true" />
@code {
private double[] radarData = new[] { 4200, 3000, 20000, 35000, 50000, 18000 };
private RadarIndicator[] indicators = new[]
{
new RadarIndicator { Name = "销售", Max = 6500 },
new RadarIndicator { Name = "管理", Max = 16000 },
new RadarIndicator { Name = "技术", Max = 30000 },
new RadarIndicator { Name = "客服", Max = 38000 },
new RadarIndicator { Name = "研发", Max = 52000 },
new RadarIndicator { Name = "市场", Max = 25000 }
};
}
圆形雷达图
<SxRadarChart Shape="circle" AreaStyle="true" />