SxAreaChart (面积图)
- Implemented
NextUI 扩展图表。专门针对面积图场景优化的封装组件。
使用场景
- 趋势与时间序列展示
- 数值变化区域可视化
- 堆叠面积对比分析
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data/Labels生成默认配置。 - 面积图基于折线图，通过
areaStyle属性实现。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 默认使用平滑曲线 (
Smooth = true)。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，可以是数值数组或对象数组。 |
| Implemented | XField |
string? |
null |
当 Data 为对象数组时，X 轴值的字段名。 |
| Implemented | YField |
string? |
null |
当 Data 为对象数组时，Y 轴值的字段名。 |
| Implemented | Smooth |
bool |
true |
是否使用平滑曲线。 |
| Implemented | ShowSymbol |
bool |
false |
是否显示数据点标记。 |
| Implemented | SymbolSize |
int |
4 |
数据点标记的大小。 |
| Implemented | LineWidth |
int |
2 |
折线宽度。 |
| Implemented | Stack |
string? |
null |
堆叠组名称。相同名称的面积图将堆叠显示。 |
| Implemented | AreaOpacity |
double |
0.7 |
面积填充的透明度。 |
| Implemented | Labels |
string[]? |
null |
X 轴分类标签。用于简单数组数据。 |
| 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 属性。 |
示例
基础面积图
<SxAreaChart Data="@(new[] { 820, 932, 901, 934, 1290, 1330, 1320 })" />
平滑曲线面积图
<SxAreaChart Data="@values" Labels="@labels" Smooth="true" AreaOpacity="0.5" />
堆叠面积图
<SxAreaChart Data="@series1" Stack="total" SeriesName="Series 1" />
<SxAreaChart Data="@series2" Stack="total" SeriesName="Series 2" />