ECharts 水球图不够炫？试试 RayChart 的创意可视化玩法-编程阁

有趣的3D图表水球：从 ECharts 到 RayChart 的升维打击

在数据可视化大屏中，“水球图”（Liquid Fill Chart）绝对是展示百分比数据（如CPU使用率、完成度、剩余电量）的颜值担当。

大家最熟悉的莫过于 ECharts 的echarts-liquidfill插件。它简单、好用，但在这个“卷”视觉的时代，传统的 2D 扁平水球有时显得不够“震撼”。

今天我们来聊聊一个有趣的话题：如何用 RayChart 手搓一个真实的 3D 水球，并对比它与 ECharts 水球的区别。

1. 传统的 2D 做法：ECharts LiquidFill

ECharts 的水球本质上是2D Canvas/SVG 绘图。

原理

它的“波浪”并不是真的流体，而是通过数学公式（通常是正弦函数y = A * sin(Bx + C) + D）在 2D 平面上绘制出的闭合路径。通过不断改变相位（Offset），让曲线平移，从而产生“波动”的视觉错觉。

特点

优点：
- 性能极佳：几乎不占用 GPU 资源。
- 兼容性好：甚至可以在不支持 WebGL 的环境运行。
- 配置简单：几行配置就能搞定。
缺点：
- 扁平：没有厚度，没有光影。
- 质感单一：虽然可以加渐变色，但无法表现出水的折射、玻璃的通透感。

2. 进阶的 3D 做法：RayChart 硬核实现

为了追求“透亮”、“像真水一样”的效果，我们必须引入WebGL和PBR（基于物理的渲染）。

在我的开源项目RayChart中，我实现了一个Liquid3D组件。下面来看看它是如何“骗”过你的眼睛的。

核心构成

一个真实的 3D 水球通常由三部分组成：

玻璃外壳：一个透明的球体容器。
液体主体：球体内部被截断的下半部分。
液体表面：一个随波浪起伏的顶盖。

技术实现细节

A. 玻璃外壳 (The Glass Shell)

ECharts 很难做出的效果就是“玻璃感”。在 RayChart (基于 Three.js) 中，我们使用MeshPhysicalMaterial，并开启transmission（透光率）属性。

const shellMaterial = new THREE.MeshPhysicalMaterial({ color: 0xffffff, transmission: 0.9, // 90% 透光，像玻璃一样 roughness: 0, // 极其光滑 ior: 1.5, // 折射率，模拟玻璃/水晶 thickness: 0.5, // 厚度，产生真实的折射效果 transparent: true });

这让背景能够透过球体产生扭曲，质感瞬间拉满。

B. 液体主体：着色器里的“裁剪术”

液体本身其实也是一个球体（SphereGeometry），但我们需要根据水位把它“切”开。

普通的clippingPlanes切出来是平的，没有波浪。所以我们需要写一点 Shader（着色器）。

秘籍：使用onBeforeCompile修改标准材质，在 Fragment Shader 中加入discard逻辑。

// GLSL 片段着色器伪代码 float h = getWaveHeight(vWorldPosition.x, vWorldPosition.z); // 计算波浪高度 // 如果当前像素的高度 > 水位 + 波浪高度，就丢弃（不渲染） if (vWorldPosition.y > uLevelY + h) discard;

这样，原本完整的球体就被“切”出了一个起伏的边缘。

C. 液体表面：动态波浪

被切掉的顶部不能空着，需要盖一个“盖子”。这个盖子是一个高密度的PlaneGeometry

难点：盖子的波动必须和球体的切口严丝合缝，否则会漏水。

解决方案：

几何同步：表面使用与主体完全相同的波浪公式（正弦波叠加）。
圆形遮罩：因为 Plane 是方形的，我们需要在 Shader 里把超出球体半径的部分裁掉。

// Vertex Shader: 让顶点随波浪起伏 vec3 pos = position; float waveH = getWaveHeight(worldPos.x, worldPos.z); pos.y += waveH; // 顶点置换 // Fragment Shader: 切成圆形 if (length(vUv - 0.5) * 2.0 > 1.0) discard;

3. 终极对比：ECharts vs RayChart

维度	ECharts LiquidFill	RayChart Liquid3D
渲染引擎	Canvas / SVG	WebGL (Three.js)
视觉维度	2D 平面	3D 空间
质感	色块、渐变、扁平阴影	折射、反射、高光、环境光遮蔽
交互	鼠标悬浮高亮	360度旋转、缩放、甚至可以晃动液体
性能开销	⭐ (极低)	⭐⭐⭐ (中高，依赖 GPU)
适用场景	普通报表、H5 页面、移动端	大屏可视化、数字孪生、高逼格演示