Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apache/echarts/llms.txt
Use this file to discover all available pages before exploring further.
Liquid Fill Chart Extension
The liquid fill chart extension provides a visually appealing way to display percentage data with animated liquid-filling effects.
Overview
Liquid fill charts are used to represent percentage values in a container shape (typically circular) with an animated liquid effect. They’re perfect for displaying metrics like progress, completion rates, or any percentage-based data.
Installation
Using npm
npm install echarts-liquidfill
Using CDN
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill/dist/echarts-liquidfill.min.js"></script>
Basic Usage
import * as echarts from 'echarts';
import 'echarts-liquidfill';
const chart = echarts.init(document.getElementById('main'));
const option = {
series: [{
type: 'liquidFill',
data: [0.6]
}]
};
chart.setOption(option);
Configuration Options
Multiple Waves
Create multiple liquid waves with different values:
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
Wave Configuration
Customize wave appearance and animation:
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4],
// Wave amplitude (height)
amplitude: 20,
// Wave length (number of waves)
waveLength: '80%',
// Animation period (ms)
period: 2000,
// Animation direction
direction: 'right', // 'left' or 'right'
// Wave animation
waveAnimation: true,
animationDuration: 2000,
animationDurationUpdate: 1000
}]
};
Shape and Outline
Control the container shape:
const option = {
series: [{
type: 'liquidFill',
data: [0.6],
// Shape: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
shape: 'circle',
// Container radius
radius: '80%',
// Center position
center: ['50%', '50%'],
// Outline style
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: 'none',
borderColor: '#294D99',
borderWidth: 8,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
}
}]
};
Colors and Styling
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4],
// Wave colors (one for each wave)
color: ['#294D99', '#156ACF', '#1598ED'],
// Background color
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
// Item style for waves
itemStyle: {
opacity: 0.8,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.4)'
}
}]
};
Label Configuration
Customize the percentage label:
const option = {
series: [{
type: 'liquidFill',
data: [0.6],
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
// Custom formatter
formatter: function(param) {
return (param.value * 100).toFixed(0) + '%';
},
// Position adjustments
position: ['50%', '50%']
}
}]
};
Advanced Examples
Gradient Colors
const option = {
series: [{
type: 'liquidFill',
data: [0.6],
color: [{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#46bee9' },
{ offset: 1, color: '#156ACF' }
]
}]
}]
};
Rectangular Liquid Fill
const option = {
series: [{
type: 'liquidFill',
data: [0.75],
shape: 'rect',
radius: '80%',
outline: {
show: false
},
backgroundStyle: {
color: '#e8e8e8'
}
}]
};
Diamond Shape with Custom Label
const option = {
series: [{
type: 'liquidFill',
data: [0.68],
shape: 'diamond',
color: ['#c23531', '#d48265', '#91c7ae'],
label: {
fontSize: 30,
formatter: function(param) {
return 'SALES\n' + (param.value * 100).toFixed(1) + '%';
}
},
outline: {
itemStyle: {
borderColor: '#c23531',
borderWidth: 5
}
}
}]
};
Dynamic Data Update
let value = 0;
const option = {
series: [{
type: 'liquidFill',
data: [value]
}]
};
chart.setOption(option);
// Update value periodically
setInterval(function() {
value = Math.random();
chart.setOption({
series: [{
data: [value]
}]
});
}, 2000);
Complete Configuration Example
const option = {
series: [{
type: 'liquidFill',
// Data (0-1 range)
data: [0.6, 0.55, 0.5],
// Colors for each wave
color: ['#294D99', '#156ACF', '#1598ED'],
// Center and radius
center: ['50%', '50%'],
radius: '75%',
// Shape
shape: 'circle',
// Wave configuration
amplitude: 15,
waveLength: '80%',
period: 2000,
direction: 'right',
waveAnimation: true,
// Outline
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderWidth: 4,
borderColor: '#156ACF',
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
// Background
backgroundStyle: {
color: '#E3F7FF'
},
// Item style for waves
itemStyle: {
opacity: 0.8
},
// Label
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
formatter: function(param) {
return (param.value * 100).toFixed(0) + '%';
}
},
// Animation
animationDuration: 2000,
animationDurationUpdate: 1000
}]
};
Resources
Tips
- Values should be in the range 0-1 (representing 0%-100%)
- Multiple waves create a more dynamic visual effect
- Adjust
amplitude and waveLength to control wave appearance
- Use
period to control animation speed (lower = faster)
- The
direction option controls whether waves move left or right