在 Apache ECharts.js 中，你可以使用 visualMap 组件来设置表面颜色。下面是一个示例代码：

// 导入必要的模块
import * as echarts from 'echarts';

// 初始化 echarts 实例
const chart = echarts.init(document.getElementById('chart'));

// 定义数据
const data = [
  [0, 0, 10],
  [0, 1, 20],
  [0, 2, 30],
  // ...
];

// 设置图表配置项
const option = {
  // 设置图表类型为 3D 散点图
  type: 'scatter3D',
  // 设置图表数据
  series: [{
    type: 'scatter3D',
    data: data,
    symbolSize: 10, // 设置散点的大小
    // 设置表面颜色
    itemStyle: {
      color: (params) => {
        const z = params.value[2]; // 获取 z 轴的值
        // 根据 z 轴的值设置不同的颜色
        if (z < 10) {
          return '#ff0000'; // 红色
        } else if (z < 20) {
          return '#00ff00'; // 绿色
        } else {
          return '#0000ff'; // 蓝色
        }
      }
    }
  }],
  // 设置可视化映射组件
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 30,
    inRange: {
      color: ['#ff0000', '#0000ff'] // 设置颜色范围
    }
  },
  // 设置坐标轴
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' }
};

// 使用配置项绘制图表
chart.setOption(option);

上述代码使用 scatter3D 类型的图表展示了一个三维散点图，并根据数据的 z 轴值设置了不同的表面颜色。通过 itemStyle 属性的 color 参数，你可以根据不同的条件返回不同的颜色值。visualMap 组件可以设置颜色的范围，这样可以更加直观地展示数据的分布情况。