SxTreeChart (树图)

Implemented

NextUI 扩展图表。专门针对树图场景优化的封装组件。

使用场景

组织架构图
目录结构可视化
决策树展示
层级分类关系

约束说明

Options 提供时将直接透传到 ECharts。
未提供 Options 时使用 Data 生成默认配置。
数据应为树形结构，包含 name 和 children 属性。

行为说明

首次渲染初始化 ECharts 实例。
Disabled 为真时不更新图表数据。
支持正交布局和径向布局。

API

Parameters (参数)

状态	参数名	类型	默认值	描述
Implemented	`Data`	`object?`	`null`	树形数据源，包含 name、children 属性。
Implemented	`Layout`	`string`	`"orthogonal"`	布局方式。可选: `orthogonal`（正交）、`radial`（径向）。
Implemented	`Orient`	`string`	`"LR"`	树的方向（仅正交布局）。可选: `LR`（左到右）、`RL`、`TB`（上到下）、`BT`。
Implemented	`Roam`	`bool`	`true`	是否开启鼠标缩放和平移漫游。
Implemented	`ShowLabel`	`bool`	`true`	是否显示节点标签。
Implemented	`SymbolSize`	`int`	`7`	节点符号大小。
Implemented	`InitialTreeDepth`	`int?`	`null`	初始展开的树深度。
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 属性。

示例

基础树图

<SxTreeChart />

自定义数据

<SxTreeChart Data="@treeData" />

@code {
    private object treeData = new
    {
        name = "根节点",
        children = new object[]
        {
            new {
                name = "分支A",
                children = new object[]
                {
                    new { name = "叶子A1" },
                    new { name = "叶子A2" }
                }
            },
            new {
                name = "分支B",
                children = new object[]
                {
                    new { name = "叶子B1" }
                }
            }
        }
    };
}

径向树图

<SxTreeChart Layout="radial" Data="@treeData" />

垂直布局

<SxTreeChart Orient="TB" Data="@treeData" />

参考设计 (References)

在 Playground 中打开 →