效果

💧深入理解 ECharts Liquidfill 水球图:从入门到进阶
在可视化数据展示中,水球图(Liquidfill)是一种极具表现力的图表。它形象地用"水位高低"表示某个百分比或完成度,非常适合展示指标进度、占比、加载状态等。
本文将结合实际 HTML 示例,带你全面掌握如何使用 ECharts + echarts-liquidfill 插件绘制水球图,并通过多个实例逐步讲解配置技巧。
📦 准备工作
在 HTML 中使用水球图,需要引入两个 JS 库:
html
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>
这两个脚本一个是 ECharts 核心库,另一个是专门用于支持 liquidfill 类型的插件。
🌊 示例一:基础水球图(快速上手)
js
series: [{
type: 'liquidFill',
data: [0.5],
radius: '80%',
label: { formatter: '50%' },
itemStyle: { color: '#00c9ff' }
}]
🎯说明:
type: 'liquidFill'
是必须的类型声明。data: [0.5]
表示水位高度为 50%。label.formatter
是中心文字内容。itemStyle.color
决定水的颜色。
适合用于快速展示"当前进度"或"完成率"。
🌈 示例二:进阶美化配置(多层波浪 + 富文本标签 + 背景边框)
js
data: [0.7, 0.65, 0.6]
✨ 使用多个数值可叠加多层波浪,让效果更有层次感。
js
label: {
formatter: '{a|完成率}\\n{b|70%}',
rich: {
a: { fontSize: 14, color: '#555' },
b: { fontSize: 26, fontWeight: 'bold', color: '#ff5722' }
}
}
🎨 使用富文本(rich
)可以设置多行文字、大小、颜色等个性样式。
js
backgroundStyle: {
borderColor: '#ff5722',
borderWidth: 2,
shadowBlur: 10
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#ff9800',
borderWidth: 4
}
}
🧱 以上配置用于美化水球的边框、阴影,适合用于正式仪表盘展示场景。
🔄 示例三:动态水位更新(实时图表)
js
let value = 0.3;
setInterval(() => {
value = (Math.random() * 0.9 + 0.1).toFixed(2);
chart.setOption({
series: [{
data: [value],
label: { formatter: () => Math.round(value * 100) + '%' }
}]
});
}, 2000);
⚡ 每隔两秒生成一个随机水位,实现动态水球效果。这种方式适合展示:
- 实时系统资源使用情况
- 服务器负载
- 传感器水位数据
🛠️ 更多配置选项速览
属性名 | 功能说明 |
---|---|
radius |
设置水球大小,如 '80%' 或 150 (像素) |
center |
设置水球在容器中的位置,如 ['50%', '50%'] |
label.formatter |
设置中间文本内容 |
itemStyle |
设置水波颜色和透明度 |
backgroundStyle |
设置背景边框、阴影效果 |
outline |
设置外部描边效果 |
🧪 使用建议与拓展思路
- 结合后端接口实时展示 KPI 数据。
- 嵌入仪表盘与其他图表联动使用。
- 支持响应式显示与点击事件监听(配合 ECharts 事件 API)。
✅ 小结
Liquidfill 水球图虽然属于 ECharts 的扩展插件,但配置方式与普通图表非常类似,借助直观的"水位"视觉表达,在很多场景下都能让数据传达更加清晰有力。
你可以通过不断调整配置参数、颜色、字体、波层,打造出富有表现力的视觉图表。
源码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ECharts Liquidfill 水球图全面示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
}
h2, p {
text-align: center;
}
.section {
max-width: 1200px;
margin: 0 auto 40px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.chart-box {
width: 300px;
height: 300px;
position: relative;
}
.desc {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>💧 ECharts Liquidfill 水球图全方位示例</h2>
<p>本页面展示了多个水球图的实际应用,并详细解释了每个配置项的含义。</p>
<div style="display:flex">
<div class="section">
<div class="desc">
<strong>示例 1:基础水球图</strong><br>
使用最简配置,仅包含一个水波层,展示 50% 的值,适合快速上手。
</div>
<div class="chart-container">
<div class="chart-box" id="chart1"></div>
</div>
</div>
<div class="section">
<div class="desc">
<strong>示例 2:多层波浪 + 自定义文本 + 背景边框</strong><br>
展示多个水波层,使用富文本显示标签,同时增加边框和阴影增强视觉效果。
</div>
<div class="chart-container">
<div class="chart-box" id="chart2"></div>
</div>
</div>
<div class="section">
<div class="desc">
<strong>示例 3:动态水球图</strong><br>
每 2 秒随机变更水位,适合展示实时数据(如内存占用、CPU 使用率等)。
</div>
<div class="chart-container">
<div class="chart-box" id="chart3"></div>
</div>
</div>
</div>
<!-- 引入 ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 引入 ECharts LiquidFill 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>
<script>
// 示例1:基础水球图
const chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption({
series: [{
type: 'liquidFill',
data: [0.5],
radius: '80%',
label: { formatter: '50%' },
itemStyle: { color: '#00c9ff' }
}]
});
// 示例2:多层波浪 + 自定义文本 + 背景
const chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption({
series: [{
type: 'liquidFill',
data: [0.7, 0.65, 0.6],
radius: '80%',
label: {
formatter: '{a|完成率}\n{b|70%}',
rich: {
a: { fontSize: 14, color: '#555' },
b: { fontSize: 26, fontWeight: 'bold', color: '#ff5722' }
}
},
itemStyle: { color: '#ff5722', opacity: 0.7 },
backgroundStyle: {
borderColor: '#ff5722',
borderWidth: 2,
shadowColor: 'rgba(0,0,0,0.2)',
shadowBlur: 10
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#ff9800',
borderWidth: 4
}
}
}]
});
// 示例3:动态水球图
const chart3 = echarts.init(document.getElementById('chart3'));
let value = 0.3;
chart3.setOption({
series: [{
type: 'liquidFill',
data: [value],
radius: '80%',
label: { formatter: () => Math.round(value * 100) + '%' },
itemStyle: { color: '#67e0e3' }
}]
});
setInterval(() => {
value = (Math.random() * 0.9 + 0.1).toFixed(2);
chart3.setOption({
series: [{
data: [value],
label: { formatter: () => Math.round(value * 100) + '%' }
}]
});
}, 2000);
</script>
</body>
</html>