SxGraphChart (关系图)

  • Implemented

NextUI 扩展图表。专门针对关系图/网络图场景优化的封装组件。

使用场景

  • 社交网络可视化
  • 知识图谱展示
  • 组织关系图
  • 依赖关系分析

约束说明

  • Options 提供时将直接透传到 ECharts。
  • 未提供 Options 时使用 Nodes/Links 生成默认配置。
  • 节点和边数据需要分别提供。

行为说明

  • 首次渲染初始化 ECharts 实例。
  • Disabled 为真时不更新图表数据。
  • 支持力导向布局、环形布局等多种布局方式。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Nodes object[]? null 节点数据，每个节点包含 id、name、value 等属性。
Implemented Links object[]? null 边/连接数据，每条边包含 source、target 属性。
Implemented Layout string "force" 布局方式。可选: force（力导向）、circular（环形）、none。
Implemented Roam bool true 是否开启鼠标缩放和平移漫游。
Implemented Draggable bool true 节点是否可拖拽。
Implemented SymbolSize int 50 节点符号大小。
Implemented ShowLabel bool true 是否显示节点标签。
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 属性。

示例

基础关系图

<SxGraphChart />

自定义节点和边

<SxGraphChart Nodes="@nodes" Links="@links" />

@code {
    private object[] nodes = new object[]
    {
        new { id = "1", name = "节点1", value = 10 },
        new { id = "2", name = "节点2", value = 20 },
        new { id = "3", name = "节点3", value = 30 }
    };

    private object[] links = new object[]
    {
        new { source = "1", target = "2" },
        new { source = "2", target = "3" },
        new { source = "3", target = "1" }
    };
}

环形布局

<SxGraphChart Layout="circular" Nodes="@nodes" Links="@links" />

力导向图

<SxGraphChart Layout="force" Draggable="true" Roam="true" />

参考设计 (References)

在 Playground 中打开 →