SxTreeMapChart (矩形树图)

Implemented

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

使用场景

层级数据占比可视化
文件大小分布展示
预算/资源分配图
分类占比分析

约束说明

Options 提供时将直接透传到 ECharts。
未提供 Options 时使用 Data 生成默认配置。
数据应为树形结构，每个节点包含 name、value 和可选的 children。

行为说明

首次渲染初始化 ECharts 实例。
Disabled 为真时不更新图表数据。
支持下钻交互。

API

Parameters (参数)

状态	参数名	类型	默认值	描述
Implemented	`Data`	`object?`	`null`	树形数据源，每个节点包含 name、value、children。
Implemented	`LeafDepth`	`int?`	`null`	下钻的最大深度。
Implemented	`ShowBreadcrumb`	`bool`	`true`	是否显示面包屑导航。
Implemented	`ShowLabel`	`bool`	`true`	是否显示节点标签。
Implemented	`LabelPosition`	`string`	`"insideTopLeft"`	标签位置。
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 属性。

示例

基础矩形树图

<SxTreeMapChart />

自定义数据

<SxTreeMapChart Data="@treemapData" />

@code {
    private object[] treemapData = new object[]
    {
        new {
            name = "部门A",
            children = new object[]
            {
                new { name = "项目1", value = 100 },
                new { name = "项目2", value = 80 }
            }
        },
        new {
            name = "部门B",
            children = new object[]
            {
                new { name = "项目3", value = 60 },
                new { name = "项目4", value = 40 }
            }
        }
    };
}

可下钻矩形树图

<SxTreeMapChart Data="@data" LeafDepth="1" ShowBreadcrumb="true" />

参考设计 (References)

在 Playground 中打开 →