SxGaugeChart (仪表盘)
- Implemented
NextUI 扩展图表。专门针对仪表盘场景优化的封装组件。
使用场景
- 单一数值指标展示
- KPI 完成度显示
- 速度/进度指示器
- 实时数据监控
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Value和相关参数生成默认配置。 - 默认值范围 0-100，可通过
Min/Max调整。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持动画过渡效果。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Value |
double |
50 |
当前显示的值。 |
| Implemented | Min |
double |
0 |
仪表盘最小值。 |
| Implemented | Max |
double |
100 |
仪表盘最大值。 |
| Implemented | StartAngle |
int |
225 |
起始角度（度）。 |
| Implemented | EndAngle |
int |
-45 |
结束角度（度）。 |
| Implemented | SplitNumber |
int |
10 |
刻度分割段数。 |
| Implemented | ShowProgress |
bool |
false |
是否显示进度条。 |
| Implemented | AxisLineWidth |
int |
30 |
轴线宽度。 |
| Implemented | DataName |
string? |
"Score" |
值下方显示的名称。 |
| Implemented | ValueFormat |
string |
"{value}" |
值的格式化字符串。 |
| Implemented | Radius |
string |
"75%" |
仪表盘半径。 |
| 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 属性。 |
示例
基础仪表盘
<SxGaugeChart Value="75" />
速度仪表盘
<SxGaugeChart Value="120" Min="0" Max="200" DataName="km/h" ValueFormat="{value}" />
进度仪表盘
<SxGaugeChart Value="80" ShowProgress="true" DataName="完成度" ValueFormat="{value}%" />
自定义角度
<SxGaugeChart Value="60" StartAngle="180" EndAngle="0" />