网站导航
> 技术文档 > 【前端】【Echarts】【Liquidfill 水球图】深入理解 ECharts Liquidfill 水球图：从入门到进阶_echarts-liquidfill

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

网友: 技术文档 2025-07-30 12:21:52

效果

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

💧深入理解 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 设置外部描边效果

🧪 使用建议与拓展思路

  1. 结合后端接口实时展示 KPI 数据。
  2. 嵌入仪表盘与其他图表联动使用。
  3. 支持响应式显示与点击事件监听（配合 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><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><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>
网络标签：

相关问题