3D图表实现方法

3D图表的基本概念

3D图表通过增加Z轴维度，在二维基础上展示更复杂的数据关系。ECharts通过GL扩展实现WebGL渲染，支持多种3D图表类型。核心在于坐标系和视觉映射的立体化处理，数据点需要包含x、y、z三个维度的数值。

// 基础三维散点图配置
option = {
  grid3D: {},
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  series: [{
    type: 'scatter3D',
    data: [
      [10, 20, 30],
      [15, 25, 35],
      [20, 30, 40]
    ]
  }]
};

坐标系系统配置

三维直角坐标系

通过grid3D配置容器，配合xAxis3D/yAxis3D/zAxis3D定义三维坐标轴。关键参数包括：

• axisPointer：三维坐标轴指示器
• viewControl：视角控制（旋转/缩放/距离）
• light：光源配置（主光/环境光）

grid3D: {
  viewControl: {
    autoRotate: true,
    autoRotateSpeed: 10,
    distance: 150
  },
  light: {
    main: {
      intensity: 1.5,
      shadow: true
    },
    ambient: {
      intensity: 0.8
    }
  }
}

极坐标系3D变体

通过angleAxis和radiusAxis结合height维度实现：

option = {
  polar: {},
  angleAxis: { max: 360 },
  radiusAxis: { type: 'value' },
  series: [{
    coordinateSystem: 'polar',
    type: 'bar3D',
    barSize: 15,
    data: [
      [30, 40, 50],
      [120, 80, 60]
    ]
  }]
};

常见3D图表实现

3D柱状图

需要定义bar3D系列，通过stack实现分组：

series: [{
  type: 'bar3D',
  shading: 'lambert',
  data: [
    [0, 0, 5],
    [0, 1, 8],
    [1, 0, 3]
  ],
  stack: 'group1'
}, {
  type: 'bar3D',
  data: [
    [0, 0, 6],
    [0, 1, 4],
    [1, 0, 7]
  ],
  stack: 'group1'
}]

3D曲面图

使用surface类型配合参数方程：

series: [{
  type: 'surface',
  equation: {
    x: { step: 0.5 },
    y: { step: 0.5 },
    z: function (x, y) {
      return Math.sin(x * Math.PI) * Math.cos(y * Math.PI);
    }
  }
}]

视觉样式增强

材质与光照

通过shading属性控制材质效果：

• 'color'：纯色填充
• 'lambert'：Lambert光照模型
• 'realistic'：PBR材质

itemStyle: {
  color: '#3398DB',
  opacity: 0.8,
  shading: 'lambert',
  borderWidth: 1,
  borderColor: 'rgba(255,255,255,0.5)'
}

动态效果

结合animation和emphasis实现交互：

series: [{
  type: 'scatter3D',
  animation: {
    duration: 2000,
    easing: 'elasticOut'
  },
  emphasis: {
    itemStyle: {
      color: '#FF4500',
      shadowBlur: 10
    }
  }
}]

大数据量优化

渐进渲染

通过progressive和progressiveThreshold控制：

series: [{
  type: 'scatter3D',
  progressive: 200,
  progressiveThreshold: 5000,
  dimensions: ['x', 'y', 'z', 'value']
}]

WebGL参数调优

调整渲染精度和后期处理：

globe: {
  baseTexture: 'world.topo.bathy.200401.jpg',
  heightTexture: 'world.topo.bathy.200401.jpg',
  displacementScale: 0.04,
  shading: 'realistic',
  light: {
    ambient: {
      intensity: 0.8
    },
    main: {
      intensity: 1.2
    }
  },
  viewControl: {
    postEffect: {
      enable: true,
      bloom: {
        enable: true
      }
    }
  }
}

混合2D与3D

组合坐标系

在同一个容器中混合使用：

option = {
  grid: [{
    left: '10%',
    width: '40%'
  }, {
    right: '10%',
    width: '40%'
  }],
  grid3D: {},
  xAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  series: [
    { type: 'bar', xAxisIndex: 0, yAxisIndex: 0 },
    { type: 'line', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'scatter3D', data: [...] }
  ]
};

地理三维扩展

3D地图

结合geo3D组件实现：

option = {
  geo3D: {
    map: 'world',
    shading: 'realistic',
    light: {
      main: {
        shadow: true,
        shadowQuality: 'high'
      }
    },
    viewControl: {
      distance: 120
    }
  },
  series: [{
    type: 'scatter3D',
    coordinateSystem: 'geo3D',
    symbolSize: 5,
    data: [
      {name: 'Beijing', value: [116.46, 39.92, 10]},
      {name: 'Shanghai', value: [121.48, 31.22, 12]}
    ]
  }]
};

性能监控与调试

内存管理

通过dispose方法释放资源：

const chart = echarts.init(dom);
chart.setOption(option);

// 页面卸载时
window.addEventListener('unload', () => {
  chart.dispose();
});

渲染帧率检测

使用stats.js监控：

import Stats from 'stats.js';

const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

function animate() {
  stats.begin();
  // 图表更新操作
  stats.end();
  requestAnimationFrame(animate);
}