SxThemeRiverChart (主题河流图)
- Implemented
NextUI 扩展图表。专门针对主题河流图场景优化的封装组件。
使用场景
- 话题热度趋势
- 事件演化可视化
- 时间维度数据分布
- 品类销量变化
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 数据格式为
[日期, 值, 主题名]三元组数组。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持多主题同时展示。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，格式为 [日期, 值, 主题名] 数组。 |
| Implemented | DateField |
string? |
null |
日期字段名。 |
| Implemented | ValueField |
string? |
null |
值字段名。 |
| Implemented | ThemeField |
string? |
null |
主题字段名。 |
| 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 属性。 |
示例
基础主题河流图
<SxThemeRiverChart />
自定义数据
<SxThemeRiverChart Data="@riverData" />
@code {
private object[] riverData = new object[]
{
new object[] { "2024/01/01", 10, "话题A" },
new object[] { "2024/01/01", 20, "话题B" },
new object[] { "2024/01/02", 15, "话题A" },
new object[] { "2024/01/02", 25, "话题B" },
new object[] { "2024/01/03", 20, "话题A" },
new object[] { "2024/01/03", 30, "话题B" }
};
}
话题热度趋势
<SxThemeRiverChart Data="@topicData" ShowLabel="true" />