用ECharts+echarts-liquidfill插件是最省事、最稳的水位图方案，支持响应式、多层波浪、富文本标签及平滑动画，无需手写Canvas或CSS实现复杂物理效果。
直接上结论：用 ECharts + echarts-liquidfill 插件是最省事、最稳的方案，比手写 Canvas 或 CSS 动画快 3 倍以上，且天然支持响应式、动画、多层波浪和富文本标签。
为什么不用 canvas 或 CSS 自己画水位图
自己用 canvas 画水位动画，要手动算贝塞尔曲线、处理波浪周期、适配不同宽高比、加阴影/边框/文字对齐——调试一小时可能只动了 5° 角度；CSS 方案依赖 transform: rotate() + overflow: hidden，但无法模拟真实“液面波动”效果，且百分比映射角度容易在 0% / 100% 处卡死或翻转。
而 echarts-liquidfill 就是专治这个的：它把波浪物理参数（振幅、频率、偏移）全封装好了，你只管传一个数字。
-
data: [0.65]→ 水位自动渲染为 65%，带默认波浪动画 - 改
radius可缩放，不需重写绘图逻辑 - 换主题？只改
itemStyle.color和backgroundStyle
必须引入的两个 script 标签顺序不能错
常见报错 TypeError: Cannot read property 'liquidFill' of undefined，90% 是因为没按顺序加载或漏了插件。
立即学习“前端免费学习笔记（深入）”；
正确写法（CDN 示例）：
<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.min.js，再引echarts-liquidfill.min.js - 版本要对齐：
echarts-liquidfill@3对应echarts@5；若用echarts@4，得降级到echarts-liquidfill@2 - 不要用 unpkg 的 latest 别名，容易因版本漂移导致
series.type不识别
data 数组长度决定波浪层数，不是随便填的
你以为 data: [0.7] 和 data: [0.7, 0.65] 只是“多一层波浪”？实际影响渲染逻辑和性能。
-
data: [0.7]→ 单层主波，适合仪表盘核心指标（如水箱剩余量） -
data: [0.7, 0.65, 0.6]→ 三层叠加，第二、三层默认透明度更低、频率略快，模拟真实液面扰动；但每多一层，CPU 绘制开销+15%左右 -
data里不能有null或字符串，否则图表直接空白，控制台也不报错——只会静默失败
示例配置（三层波 + 中心文字）：
series: [{
type: 'liquidFill',
data: [0.72, 0.68, 0.64],
radius: '70%',
label: {
formatter: '{a|{value}%}\n{b|水位}',
rich: {
a: { fontSize: 28, fontWeight: 'bold', color: '#2196F3' },
b: { fontSize: 14, color: '#999' }
}
}
}]动态更新水位时，别直接改 data 数组引用
常见错误写法：myChart.setOption({ series: [{ data: [newVal] }] }); 看似没问题，但会导致波浪动画重置（从 0 开始重新波动），体验像“水被抽干又灌满”。
正确做法是复用原 series 配置，只更新 data 值：
let currentData = [0.4];
const option = {
series: [{
type: 'liquidFill',
data: currentData, // 引用变量，非字面量
radius: '75%',
// ...其他配置
}]
};
myChart.setOption(option);
<p>// 更新时：
currentData[0] = 0.83;
myChart.setOption({ series: [{ data: currentData }] });关键点：
- 保持
data是同一个数组引用，ECharts 才能触发平滑过渡动画 - 如果用了多层波（如
[0.7, 0.65]），更新时也要保持长度一致，否则第二层波会消失 - 数值必须是 0–1 范围内的 number，
'0.7'字符串或70整数都会让波浪停住
水位仪表盘真正难的不是画出来，而是让波浪“呼吸感”自然、数值更新不跳变、缩放后文字不糊、低配设备不掉帧——这些细节 echarts-liquidfill 都压在底层了，你只需要管好那个小数点后的数字。
