SxSunburstChart (旭日图)
- Implemented
NextUI 扩展图表。专门针对旭日图场景优化的封装组件。
使用场景
- 层级数据占比展示
- 组织结构可视化
- 多层级分类数据
- 放射状层级关系
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 数据应为树形结构，每个节点包含 name、value 和可选的 children。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持点击下钻和聚焦交互。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
树形数据源，每个节点包含 name、value、children。 |
| Implemented | Radius |
object? |
null |
旭日图的半径，可以是 ["内半径", "外半径"]。 |
| Implemented | ShowLabel |
bool |
true |
是否显示标签。 |
| Implemented | LabelRotate |
string |
"radial" |
标签旋转方式。可选: radial（径向）、tangential（切向）。 |
| 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 属性。 |
示例
基础旭日图
<SxSunburstChart />
多层级旭日图
<SxSunburstChart Data="@sunburstData" Radius='@(new[] { "15%", "80%" })' />
@code {
private object[] sunburstData = new object[]
{
new {
name = "销售部",
children = new object[]
{
new { name = "Q1", value = 25 },
new { name = "Q2", value = 30 },
new { name = "Q3", value = 20 },
new { name = "Q4", value = 25 }
}
},
new {
name = "市场部",
children = new object[]
{
new { name = "Q1", value = 15 },
new { name = "Q2", value = 20 }
}
}
};
}
可下钻旭日图
<SxSunburstChart Data="@data" ChartTitle="组织架构" />