SxLiquidfillChart (水球图)
- Implemented
NextUI 扩展图表。专门针对水球图/液态填充图场景优化的封装组件。
使用场景
- 百分比进度展示
- 完成度可视化
- 仪表盘数值显示
- 目标达成率
⚠️ 依赖说明
此组件需要安装 echarts-liquidfill 扩展：
npm install echarts-liquidfill
然后在页面中引入：
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Value和相关参数生成默认配置。 - 值范围通常为 0-1（表示百分比）。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持多波浪动画效果。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Value |
object? |
0.6 |
显示的值（0-1 范围），可以是单个值或数组（多波浪）。 |
| Implemented | Shape |
string |
"circle" |
形状。可选: circle, rect, roundRect, triangle, diamond, pin, arrow，或 path:// SVG 路径。 |
| Implemented | Center |
object? |
["50%", "50%"] |
中心位置。 |
| Implemented | Radius |
object? |
"50%" |
半径，可以是单个值或 [内半径, 外半径]。 |
| Implemented | Amplitude |
object? |
自动 | 波浪振幅（高度）。 |
| Implemented | WaveLength |
object? |
自动 | 波浪长度，相对值。 |
| Implemented | WaveColors |
IEnumerable<string>? |
null |
波浪颜色数组。 |
| Implemented | BackgroundColor |
string? |
null |
背景颜色。 |
| Implemented | BorderColor |
string? |
null |
边框颜色。 |
| Implemented | BorderWidth |
double |
0 |
边框宽度。 |
| Implemented | ShowLabel |
bool |
true |
是否显示标签。 |
| Implemented | LabelFontSize |
int? |
null |
标签字体大小。 |
| Implemented | LabelColor |
string? |
null |
标签颜色。 |
| Implemented | LabelFormatter |
string? |
null |
标签格式化字符串，可包含 {value}。 |
| Implemented | Direction |
string |
"right" |
波浪动画方向。可选: right, left。 |
| 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 属性。 |
示例
基础水球图
<SxLiquidfillChart Value="0.6" />
多波浪水球图
<SxLiquidfillChart Value='@(new[] { 0.6, 0.5, 0.4 })'
WaveColors='@(new[] { "#294D99", "#156ACF", "#1598ED" })' />
自定义形状
<SxLiquidfillChart Value="0.75" Shape="diamond" />
带边框和自定义标签
<SxLiquidfillChart Value="0.85"
BorderColor="#1890ff"
BorderWidth="5"
LabelFormatter="{value}%"
LabelFontSize="32" />