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

3个惊艳技巧：用echarts-liquidfill打造动态液位图表，让你的数据“活“起来！

news 2026/8/6 19:03:19

3个惊艳技巧：用echarts-liquidfill打造动态液位图表，让你的数据"活"起来！

【免费下载链接】echarts-liquidfillLiquid Fill Chart for Apache ECharts项目地址: https://gitcode.com/gh_mirrors/ec/echarts-liquidfill

你是否厌倦了传统静态图表那种呆板的数字展示？想让你的数据仪表盘像活水般流动起来？echarts-liquidfill正是你需要的解决方案！这个强大的Apache ECharts扩展插件，能将枯燥的百分比数据转化为生动的液位动画效果，让数据可视化不再单调乏味。想象一下，你的项目进度、服务器负载、销售完成率等关键指标，都能以流动的水波形式直观呈现，这不仅能提升用户体验，还能让数据汇报更具视觉冲击力。

🚀 5分钟快速上手：从零开始创建你的第一个液位图

让我们跳过复杂的理论，直接动手创建一个简单的液位图表。首先，你需要克隆项目到本地：

git clone https://gitcode.com/gh_mirrors/ec/echarts-liquidfill

然后在你的HTML文件中引入必要的资源：

<!-- 引入ECharts核心库 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <!-- 引入echarts-liquidfill插件 --> <script src="./dist/echarts-liquidfill.js"></script>

现在，只需几行JavaScript代码，你就能创建一个基本的液位图表：

// 初始化图表容器 var chart = echarts.init(document.getElementById('chart-container')); // 设置图表选项 chart.setOption({ series: [{ type: 'liquidFill', // 指定图表类型为液位图 data: [0.75], // 设置填充比例为75% label: { formatter: '完成率：{c}%', // 自定义标签显示 fontSize: 24, color: '#fff' } }] });

看到了吗？不到10行代码，你就创建了一个动态的液位图表！这个图表会以水波动画的形式显示75%的填充效果，标签会实时显示当前数值。

🎯 进阶技巧：让液位图表成为数据讲述者

技巧1：多层液位叠加，展现数据层次

单一液位虽然直观，但多层叠加能讲述更丰富的数据故事。想象一下，你可以用不同颜色的液位层表示不同维度的数据：

series: [{ type: 'liquidFill', data: [ 0.85, // 第一层：整体进度 { value: 0.65, // 第二层：核心模块进度 direction: 'left', // 向左波动 itemStyle: { color: '#ff6b6b' } }, { value: 0.45, // 第三层：基础功能进度 itemStyle: { color: '#4ecdc4' } } ], radius: '85%', outline: { show: false // 隐藏轮廓线，让多层效果更明显 } }]

这种多层设计特别适合展示项目的不同阶段完成情况，或者产品的多个功能模块进展。

技巧2：自定义形状，让图表更有个性

谁说液位图只能是圆形？通过修改shape参数，你可以创建各种形状的液位容器：

series: [{ type: 'liquidFill', data: [0.7], shape: 'diamond', // 钻石形状 // 其他可选形状：'rect'（矩形）、'triangle'（三角形）、'pin'（针形） label: { formatter: '钻石进度\n{c}%', position: ['50%', '50%'] } }]

形状定义的核心逻辑位于src/liquidFillShape.js，你可以查看源码了解如何自定义更多形状。

技巧3：动态数据更新，创建实时监控效果

液位图表的真正威力在于它的动态性。结合定时器，你可以创建实时更新的监控面板：

// 模拟实时数据更新 setInterval(function() { var currentValue = Math.random() * 0.3 + 0.5; // 生成50%-80%之间的随机值 chart.setOption({ series: [{ data: [currentValue] }] }); }, 2000); // 每2秒更新一次 // 或者响应真实数据源 function updateChartFromAPI() { fetch('/api/progress') .then(response => response.json()) .then(data => { chart.setOption({ series: [{ data: [data.progress] }] }); }); }

💡 实战应用：3个真实场景的液位图解决方案

场景1：项目进度监控仪表盘

在项目管理中，进度监控是核心需求。echarts-liquidfill可以让你创建直观的项目进度展示：

// 项目进度监控配置 var projectProgressOption = { series: [{ type: 'liquidFill', data: [0.68], amplitude: 5, // 减小波动幅度，更专业 period: 4000, // 调整波动周期 waveAnimation: true, label: { formatter: function(param) { return '项目进度\n' + (param.value * 100).toFixed(1) + '%'; }, fontSize: 20, fontWeight: 'bold' }, backgroundStyle: { color: '#f0f8ff' // 浅蓝色背景 }, outline: { borderDistance: 3, itemStyle: { borderColor: '#156ACF', borderWidth: 3 } } }] };

场景2：服务器负载实时监控

对于运维人员来说，实时监控服务器负载至关重要。液位图能直观显示CPU、内存使用率：

// 服务器监控配置 var serverMonitorOption = { series: [{ type: 'liquidFill', data: [{ value: 0.82, itemStyle: { color: serverLoad > 0.8 ? '#ff4757' : '#2ed573' } }], shape: 'rect', radius: '90%', label: { formatter: 'CPU负载\n{c}%', color: '#2f3542' } }] };

场景3：销售目标达成率展示

在销售仪表盘中，用液位图展示目标达成率既直观又有冲击力：

// 销售目标展示配置 var salesTargetOption = { series: [{ type: 'liquidFill', data: [0.92, 0.88, 0.85], // 三层液位表示不同产品线 color: ['#ff9ff3', '#f368e0', '#ff6b81'], label: { formatter: 'Q3销售达成\n92%', fontSize: 28, color: '#222f3e' }, emphasis: { // 鼠标悬停效果 itemStyle: { opacity: 0.8 } } }] };

⚠️ 避坑指南：常见问题与解决方案

问题1：动画性能优化

如果你的页面中有多个液位图表，可能会遇到性能问题。解决方案是适当调整动画参数：

series: [{ type: 'liquidFill', data: [0.6], waveAnimation: true, animationDuration: 1500, // 减少动画时长 animationEasing: 'cubicOut', // 使用缓动函数 // 在移动端可以考虑关闭动画 // waveAnimation: !isMobileDevice }]

问题2：响应式设计适配

不同屏幕尺寸下，图表需要自适应调整。ECharts提供了媒体查询功能：

chart.setOption({ baseOption: { series: [{ type: 'liquidFill', data: [0.6], radius: '70%' }] }, media: [{ query: { maxWidth: 768 // 移动端适配 }, option: { series: [{ radius: '50%', // 缩小半径 label: { fontSize: 16 // 减小字体 } }] } }] });

问题3：数据精度处理

当数据变化很小时，液位动画可能会显得不自然。可以通过数据格式化来解决：

function formatLiquidData(value) { // 将数据限制在合理范围内 value = Math.max(0, Math.min(1, value)); // 保留两位小数，避免微小变化 return Math.round(value * 100) / 100; } chart.setOption({ series: [{ type: 'liquidFill', data: [formatLiquidData(rawData)] }] });