SxHeatmapChart (热力图)
- Implemented
NextUI 扩展图表。专门针对热力图场景优化的封装组件。
使用场景
- 数据密度可视化
- 时间-类别矩阵展示
- 相关性矩阵
- 用户行为热力分析
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 数据格式为
[x, y, value]三元组数组。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 包含视觉映射组件用于颜色渐变。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，应为 [x, y, value] 数组或对象数组。 |
| Implemented | XField |
string? |
null |
当 Data 为对象数组时，X 轴值的字段名。 |
| Implemented | YField |
string? |
null |
当 Data 为对象数组时，Y 轴值的字段名。 |
| Implemented | ValueField |
string? |
null |
当 Data 为对象数组时，值的字段名。 |
| Implemented | Min |
double? |
null |
视觉映射最小值。未设置时自动计算。 |
| Implemented | Max |
double? |
null |
视觉映射最大值。未设置时自动计算。 |
| Implemented | ShowLabel |
bool |
false |
是否在单元格上显示值标签。 |
| Implemented | XCategories |
string[]? |
null |
X 轴类别标签。 |
| Implemented | YCategories |
string[]? |
null |
Y 轴类别标签。 |
| 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 属性。 |
示例
基础热力图
<SxHeatmapChart />
自定义数据
<SxHeatmapChart Data="@heatmapData"
XCategories="@xLabels"
YCategories="@yLabels"
Min="0"
Max="100" />
@code {
private object[] heatmapData = new object[]
{
new[] { 0, 0, 10 }, new[] { 0, 1, 20 },
new[] { 1, 0, 30 }, new[] { 1, 1, 40 }
};
private string[] xLabels = new[] { "周一", "周二" };
private string[] yLabels = new[] { "早", "晚" };
}
显示值标签
<SxHeatmapChart ShowLabel="true" />