当前位置：首页 > news >正文

【前端】【Echarts】【Liquidfill 水球图】深入理解 ECharts Liquidfill 水球图：从入门到进阶

news 2025/7/21 11:53:12

效果

💧深入理解 ECharts Liquidfill 水球图：从入门到进阶

在可视化数据展示中，水球图（Liquidfill）是一种极具表现力的图表。它形象地用“水位高低”表示某个百分比或完成度，非常适合展示指标进度、占比、加载状态等。

本文将结合实际 HTML 示例，带你全面掌握如何使用 ECharts + echarts-liquidfill 插件绘制水球图，并通过多个实例逐步讲解配置技巧。

📦 准备工作

在 HTML 中使用水球图，需要引入两个 JS 库：

<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 类型的插件。

🌊 示例一：基础水球图（快速上手）

series: [{type: 'liquidFill',data: [0.5],radius: '80%',label: { formatter: '50%' },itemStyle: { color: '#00c9ff' }
}]

🎯说明：

type: 'liquidFill' 是必须的类型声明。
data: [0.5] 表示水位高度为 50%。
label.formatter 是中心文字内容。
itemStyle.color 决定水的颜色。

适合用于快速展示“当前进度”或“完成率”。

🌈 示例二：进阶美化配置（多层波浪 + 富文本标签 + 背景边框）

data: [0.7, 0.65, 0.6]

✨ 使用多个数值可叠加多层波浪，让效果更有层次感。

label: {formatter: '{a|完成率}\\n{b|70%}',rich: {a: { fontSize: 14, color: '#555' },b: { fontSize: 26, fontWeight: 'bold', color: '#ff5722' }}
}

🎨 使用富文本（rich）可以设置多行文字、大小、颜色等个性样式。

backgroundStyle: {borderColor: '#ff5722',borderWidth: 2,shadowBlur: 10
},
outline: {show: true,borderDistance: 5,itemStyle: {borderColor: '#ff9800',borderWidth: 4}
}

🧱 以上配置用于美化水球的边框、阴影，适合用于正式仪表盘展示场景。

🔄 示例三：动态水位更新（实时图表）

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 的扩展插件，但配置方式与普通图表非常类似，借助直观的“水位”视觉表达，在很多场景下都能让数据传达更加清晰有力。

你可以通过不断调整配置参数、颜色、字体、波层，打造出富有表现力的视觉图表。

源码

<!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>