ECharts Liquid Fill Gauge
A liquid-filling gauge — a circular vessel filled to a percentage with animated wave motion that makes the filling level feel physical. Built with the echarts-liquidfill plugin on top of Apache ECharts, this template renders three concentric layers at slightly different wave spee
Template details
- chart
- gauge
- liquid
- fill
- kpi
- animated
- echarts
When to use this template
This visualization makes obvious the current proportion of a whole, emphasizing a 'how full' or 'how utilized' state rather than 'how far along'. Analysts reach for it to monitor a single key performance indicator that represents capacity, progress towards a limit, or resource utilization, especially in operational contexts where continuous motion can draw attention to the metric's status.
- Single numerical value representing a percentage or proportion
- Data ranging from 0 to 100 (or 0 to 1) indicating a 'level'
- Metrics where the concept of 'fullness' or 'remaining capacity' is key
- Real-time or frequently updated operational metrics for quick glance monitoring
- Displaying a single KPI without additional categorical or temporal dimensions
- Situations where visual distinctiveness and subtle animation are desired