SxFunnelChart (漏斗图)
- Implemented
NextUI 扩展图表。专门针对漏斗图场景优化的封装组件。
使用场景
- 转化率分析
- 销售漏斗展示
- 用户行为路径分析
- 流程阶段可视化
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data生成默认配置。 - 数据应包含 name 和 value 属性。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持升序、降序、无序三种排序方式。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，应为包含 name/value 的对象数组。 |
| Implemented | NameField |
string? |
null |
当 Data 为对象数组时，名称字段名。 |
| Implemented | ValueField |
string? |
null |
当 Data 为对象数组时，值字段名。 |
| Implemented | Sort |
string |
"descending" |
排序方式。可选: descending（降序）、ascending（升序）、none（无序）。 |
| Implemented | Orient |
string |
"vertical" |
方向。可选: vertical（垂直）、horizontal（水平）。 |
| Implemented | Gap |
int |
2 |
漏斗项之间的间隔（像素）。 |
| Implemented | ShowLabel |
bool |
true |
是否显示标签。 |
| Implemented | LabelPosition |
string |
"inside" |
标签位置。可选: inside、outside、left、right。 |
| Implemented | Labels |
string[]? |
null |
当 Data 为简单数组时的标签。 |
| 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 属性。 |
示例
基础漏斗图
<SxFunnelChart />
销售漏斗
<SxFunnelChart Data="@funnelData" />
@code {
private object[] funnelData = new object[]
{
new { name = "访问", value = 100 },
new { name = "咨询", value = 80 },
new { name = "订单", value = 60 },
new { name = "点击", value = 40 },
new { name = "成交", value = 20 }
};
}
金字塔图（升序）
<SxFunnelChart Sort="ascending" />
水平漏斗图
<SxFunnelChart Orient="horizontal" LabelPosition="outside" />