SxScatterChart (散点图)
- Implemented
NextUI 扩展图表。专门针对散点图/气泡图场景优化的封装组件。
使用场景
- 数据分布可视化
- 相关性分析
- 异常值检测
- 气泡图展示三维数据
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 数据格式为
[x, y]或[x, y, size]数组。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 当指定
SizeField时自动转换为气泡图。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，应为 [x, y] 坐标对数组或对象数组。 |
| Implemented | XField |
string? |
null |
当 Data 为对象数组时，X 轴值的字段名。 |
| Implemented | YField |
string? |
null |
当 Data 为对象数组时，Y 轴值的字段名。 |
| Implemented | SizeField |
string? |
null |
气泡大小字段名。指定后生成气泡图。 |
| Implemented | SymbolSize |
int |
10 |
未使用 SizeField 时的固定符号大小。 |
| Implemented | Symbol |
string |
"circle" |
符号形状。可选: circle, rect, roundRect, triangle, diamond, pin, arrow。 |
| 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 属性。 |
示例
基础散点图
<SxScatterChart />
自定义数据
<SxScatterChart Data="@scatterData" XField="Height" YField="Weight" />
@code {
private object[] scatterData = new[]
{
new { Height = 170, Weight = 65 },
new { Height = 175, Weight = 70 },
new { Height = 180, Weight = 75 }
};
}
气泡图
<SxScatterChart Data="@bubbleData" XField="X" YField="Y" SizeField="Size" />