SxLinesChart (路径图)
- Implemented
NextUI 扩展图表。专门针对路径图/航线图场景优化的封装组件。
使用场景
- 航线/航班可视化
- 物流运输路径
- 人口迁徙图
- 数据流动展示
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 通常与地图或地理坐标系配合使用。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持动画效果展示数据流动。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
路径数据，每条路径为坐标点数组。 |
| Implemented | CoordinateSystem |
string |
"geo" |
坐标系类型。可选: geo（地理）、cartesian2d（笛卡尔）。 |
| Implemented | Polyline |
bool |
false |
是否为多段线（多于两个点）。 |
| Implemented | ShowEffect |
bool |
true |
是否显示动画效果。 |
| Implemented | EffectSymbol |
string |
"arrow" |
动画符号。可选: circle、arrow、pin 等。 |
| Implemented | EffectSymbolSize |
int |
6 |
动画符号大小。 |
| Implemented | LineWidth |
int |
1 |
线宽度。 |
| 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 属性。 |
示例
基础路径图
<SxLinesChart />
自定义路径数据
<SxLinesChart Data="@linesData" ShowEffect="true" />
@code {
private object[] linesData = new object[]
{
new {
coords = new double[][]
{
new double[] { 116.46, 39.92 }, // 北京
new double[] { 121.48, 31.22 } // 上海
}
},
new {
coords = new double[][]
{
new double[] { 116.46, 39.92 }, // 北京
new double[] { 113.23, 23.16 } // 广州
}
}
};
}
带动画效果
<SxLinesChart Data="@data" ShowEffect="true" EffectSymbol="arrow" EffectSymbolSize="8" />