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

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

news 2025/7/11 9:59:06

效果

效果

💧深入理解 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>
<!-- 引入 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>
http://www.dtcms.com/a/272866.html

相关文章：

  • 解决飞牛 NAS 安装 OpenResty时的端口被占用问题！（如何解决飞牛Nas 80 443 端口被占用的问题）
  • C++ 模板参数展开
  • AI测试革命：从智能缺陷检测到自愈式测试框架的工业实践
  • 谷粒商城高级篇
  • 用GNU Radio生成Frank信号
  • Redisson 的分布式锁
  • 动态物体滤除算法
  • 全连接神经网络
  • AI教学设计助手：生成好教案的Prompt技术实战（二）
  • Java中实现线程安全的几种方式
  • 我做了一个在线工具导航网站！
  • Apache
  • 一招解决Win11桌面右键刷新BUG问题！
  • 高通跃龙IoT-IQ系列芯片深度解析：定位、特性与应用全景
  • 智能音视频-搭建可视化智能体
  • 机器学10——集成学习
  • 北京-4年功能测试2年空窗-报培训班学测开-第四十七天
  • 汽车功能安全-软件集成和验证（Software Integration Verification）【目的、验证输入、集成验证要求】9
  • Synopsys 逻辑综合之 MultiBit Flip-Flop 与 ICG
  • 【TCP/IP】9. 域名系统（DNS）
  • Agent自动化与代码智能
  • 【更新至2023年】1998-2023年各地级市第一产业占GDP比重数据（全市）
  • 防爬虫君子协定 Robots.txt 文件
  • jetson agx orin 刷机、cuda、pytorch配置指南【亲测有效】
  • 【AI】人工智能领域关键术语全解析
  • [C#] 使用TextBox换行失败的原因与解决方案：换用RichTextBox的实战经验
  • AI 智能体：开启自动化协作新时代
  • The 2023 ICPC Asia Hangzhou Regional Contest（G. Snake Move（最短路））
  • GoView 低代码数据可视化
  • Git保姆级入门实战：从安装配置到常用命令与常见错误解决