Apache ECharts GL 中曲面图数据排序问题解析

在使用 Apache ECharts GL 绘制 3D 曲面图时，数据点的排列顺序是一个容易被忽视但至关重要的细节。本文将通过一个典型示例，深入分析曲面图数据排序的正确方式及其原理。

问题现象

当开发者尝试绘制一个平行于 Y/Z 轴的矩形平面时，可能会遇到曲面显示异常的情况。例如，使用以下数据点序列：

[
  [0, 3, -8],[0, 3, -7], [0, 3, -6], [0, 3, -5], [0, 3, -4], [0, 3, -3], [0, 3, -2], [0, 3, -1],
  [15, 3, -8],[15, 3, -7],[15, 3, -6], [15, 3, -5], [15, 3, -4], [15, 3, -3], [15, 3, -2], [15, 3, -1]
]

会导致曲面显示不完整或出现异常连接。而当删除每行的第一个数据点后，曲面却能正确显示。

根本原因

ECharts GL 的曲面图数据点需要遵循特定的排序规则：

1. X 轴优先变化原则：数据点必须按照 X 值优先变化的顺序排列
2. 网格结构要求：曲面图实际上是由多个四边形面片组成的网格，数据点需要形成规则的网格结构

对于平行于 Y/Z 轴的平面，正确的数据排列应该是：

[
  [0, 3, -8], [15, 3, -8],
  [0, 3, -7], [15, 3, -7],
  [0, 3, -6], [15, 3, -6],
  // 其余数据点...
]

这种排列方式确保了：

• 每个四边形由相邻的四个点构成
• 网格结构清晰明确
• 曲面能够被正确三角化

解决方案

要正确绘制平行于 Y/Z 轴的平面，开发者应该：

1. 将数据点按照 Z 值分组
2. 在每个 Z 值下，排列所有 X 值
3. 保持 Y 值不变（对于平面）

示例代码结构：

data: (function() {
  const data = [];
  for (let z = -8; z <= -1; z++) {
    data.push([0, 3, z], [15, 3, z]);
  }
  return data;
})()

最佳实践

1. 可视化调试：先使用少量数据点测试曲面结构
2. 数据生成函数：对于规则曲面，使用函数生成数据点
3. 网格验证：确保数据点形成规则的四边形网格
4. 正交投影：对于技术绘图，使用正交投影避免透视变形

总结

ECharts GL 的曲面图功能强大，但需要开发者理解其底层网格生成原理。正确的数据排序是确保曲面正确显示的关键。通过遵循 X 轴优先变化的原则和构建规则的网格结构，开发者可以轻松绘制各种复杂的 3D 曲面。