Methods for implementing 3D charts

Basic Concepts of 3D Charts

3D charts add a Z-axis dimension to display more complex data relationships on top of two-dimensional representations. ECharts implements WebGL rendering through the GL extension, supporting various types of 3D charts. The core lies in the three-dimensional processing of coordinate systems and visual mapping, where data points must include numerical values for the x, y, and z dimensions.

// Basic 3D scatter plot configuration  
option = {  
  grid3D: {},  
  xAxis3D: { type: 'value' },  
  yAxis3D: { type: 'value' },  
  zAxis3D: { type: 'value' },  
  series: [{  
    type: 'scatter3D',  
    data: [  
      [10, 20, 30],  
      [15, 25, 35],  
      [20, 30, 40]  
    ]  
  }]  
};  

Coordinate System Configuration

3D Cartesian Coordinate System

Configure the container via grid3D, combined with xAxis3D/yAxis3D/zAxis3D to define the 3D axes. Key parameters include:

• axisPointer: 3D axis indicator
• viewControl: Viewpoint control (rotation/zoom/distance)
• light: Light source configuration (main/ambient light)

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

Polar Coordinate System 3D Variant

Implemented using angleAxis and radiusAxis combined with a height dimension:

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

Common 3D Chart Implementations

3D Bar Chart

Define a bar3D series and use stack for grouping:

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 Plot

Use the surface type with parametric equations:

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);  
    }  
  }  
}]  

Visual Style Enhancements

Materials and Lighting

Control material effects via the shading property:

• 'color': Solid color fill
• 'lambert': Lambert lighting model
• 'realistic': PBR material

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

Dynamic Effects

Combine animation and emphasis for interactivity:

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

Large Data Optimization

Progressive Rendering

Control via progressive and progressiveThreshold:

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

WebGL Parameter Tuning

Adjust rendering precision and post-processing:

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  
      }  
    }  
  }  
}  

Combining 2D and 3D

Mixed Coordinate Systems

Use in the same container:

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: [...] }  
  ]  
};  

Geographic 3D Extensions

3D Maps

Implemented with the geo3D component:

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]}  
    ]  
  }]  
};  

Performance Monitoring and Debugging

Memory Management

Release resources via the dispose method:

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

// On page unload  
window.addEventListener('unload', () => {  
  chart.dispose();  
});  

Rendering Frame Rate Detection

Monitor using stats.js:

import Stats from 'stats.js';  

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

function animate() {  
  stats.begin();  
  // Chart update operations  
  stats.end();  
  requestAnimationFrame(animate);  
}