SxWordcloudChart (词云图)

  • Implemented

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

使用场景

  • 关键词分析
  • 热门话题展示
  • 标签云可视化
  • 文本频率分析

⚠️ 依赖说明

此组件需要安装 echarts-wordcloud 扩展：

npm install echarts-wordcloud

然后在页面中引入：

<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script>

约束说明

  • Options 提供时将直接透传到 ECharts。
  • 未提供 Options 时使用 Data 生成默认配置。
  • 数据应包含 name（词）和 value（权重）属性。

行为说明

  • 首次渲染初始化 ECharts 实例。
  • Disabled 为真时不更新图表数据。
  • 支持多种形状和旋转角度。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Data object? null 数据源，包含 name 和 value 属性的对象数组。
Implemented NameField string "name" 词文本字段名。
Implemented ValueField string "value" 词权重字段名。
Implemented Shape string "circle" 词云形状。可选: circle, cardioid（心形）, diamond, square, triangle-forward, triangle, pentagon, star。
Implemented Left object? "center" 左侧位置。
Implemented Top object? "center" 顶部位置。
Implemented Width object? "70%" 宽度。
Implemented Height object? "80%" 高度。
Implemented SizeRangeMin int 12 最小字体大小（像素）。
Implemented SizeRangeMax int 60 最大字体大小（像素）。
Implemented RotationRange object? [-90, 90] 文字旋转范围（度）。
Implemented RotationStep int 45 旋转步进角度。
Implemented GridSize int 8 网格大小，越大间距越大。
Implemented DrawOutOfBound bool false 是否允许绘制到边界外。
Implemented TextStyle object? 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 属性。

示例

基础词云

<SxWordcloudChart />

自定义数据

<SxWordcloudChart Data="@wordData" />

@code {
    private object[] wordData = new object[]
    {
        new { name = "数据可视化", value = 1000 },
        new { name = "ECharts", value = 900 },
        new { name = "Blazor", value = 850 },
        new { name = "词云", value = 800 },
        new { name = "组件", value = 750 }
    };
}

心形词云

<SxWordcloudChart Shape="cardioid" SizeRangeMin="10" SizeRangeMax="80" />

横向词云（不旋转）

<SxWordcloudChart RotationRange='@(new[] { 0, 0 })' RotationStep="0" />

星形词云

<SxWordcloudChart Shape="star" GridSize="10" />

参考设计 (References)

在 Playground 中打开 →