SxParallelChart (平行坐标图)
- Implemented
NextUI 扩展图表。专门针对平行坐标图场景优化的封装组件。
使用场景
- 多维数据对比分析
- 产品参数对比
- 数据聚类可视化
- 异常值筛选
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data/Dimensions生成默认配置。 - 每条数据线对应一条平行坐标轴。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持轴上刷选过滤数据。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，每条数据为一个数值数组。 |
| Implemented | Dimensions |
string[]? |
null |
维度名称数组，对应每条平行轴。 |
| Implemented | Layout |
string |
"horizontal" |
布局方向。可选: horizontal、vertical。 |
| Implemented | ParallelAxisDefault |
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 属性。 |
示例
基础平行坐标图
<SxParallelChart />
自定义数据
<SxParallelChart Data="@parallelData" Dimensions="@dimensions" />
@code {
private double[][] parallelData = new[]
{
new double[] { 1, 55, 9, 56, 0.46, 18, 6 },
new double[] { 2, 25, 11, 21, 0.65, 34, 9 },
new double[] { 3, 56, 7, 63, 0.3, 14, 5 }
};
private string[] dimensions = new[] { "指标1", "指标2", "指标3", "指标4", "指标5", "指标6", "指标7" };
}
产品参数对比
<SxParallelChart Data="@productData"
Dimensions='@(new[] { "价格", "性能", "续航", "重量", "屏幕" })' />