Skip to main content

​
ECharts GL

ECharts GL is a powerful 3D visualization extension for Apache ECharts, providing enhanced rendering capabilities for creating stunning 3D charts and visualizations.

​
Overview

ECharts GL extends the core ECharts library with WebGL-based rendering, enabling you to create:
  • 3D Charts: 3D bar charts, scatter plots, surface plots, and more
  • Geographic Visualizations: 3D maps and globe visualizations
  • Graph Layouts: 3D force-directed graphs
  • Advanced Effects: Realistic lighting, shadows, and post-processing effects

​
Installation

​
Using npm

npm install echarts-gl

​
Using CDN

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

​
Basic Usage

After installing ECharts GL, you can use it directly with ECharts: 
import * as echarts from 'echarts';
import 'echarts-gl';

const chart = echarts.init(document.getElementById('main'));

const option = {
  grid3D: {},
  xAxis3D: {},
  yAxis3D: {},
  zAxis3D: {},
  series: [{
    type: 'scatter3D',
    data: [
      [1, 2, 3],
      [2, 3, 4],
      [3, 4, 5]
    ]
  }]
};

chart.setOption(option);

​
3D Chart Types

ECharts GL provides several 3D chart types:

​
3D Scatter

series: [{
  type: 'scatter3D',
  symbolSize: 12,
  data: data,
  itemStyle: {
    opacity: 0.8
  }
}]

​
3D Bar

series: [{
  type: 'bar3D',
  data: data,
  shading: 'lambert'
}]

​
3D Surface

series: [{
  type: 'surface',
  wireframe: {
    show: false
  },
  equation: {
    x: { min: -3, max: 3 },
    y: { min: -3, max: 3 },
    z: function (x, y) {
      return Math.sin(x * x + y * y) * x / 3.14;
    }
  }
}]

​
3D Line

series: [{
  type: 'line3D',
  data: data,
  lineStyle: {
    width: 4
  }
}]

​
Globe Visualization

Create interactive 3D globe visualizations: 
const option = {
  globe: {
    baseTexture: 'world.jpg',
    shading: 'realistic',
    light: {
      ambient: {
        intensity: 0.4
      },
      main: {
        intensity: 0.4
      }
    }
  },
  series: [{
    type: 'scatter3D',
    coordinateSystem: 'globe',
    data: geoData
  }]
};

​
Visual Effects

​
Lighting

Control realistic lighting effects: 
light: {
  main: {
    intensity: 1.2,
    shadow: true
  },
  ambient: {
    intensity: 0.3
  },
  ambientCubemap: {
    texture: 'pisa.hdr',
    exposure: 1.0
  }
}

​
Post-Processing

Add visual effects like depth of field and color correction: 
postEffect: {
  enable: true,
  bloom: {
    enable: true,
    intensity: 0.1
  },
  depthOfField: {
    enable: true,
    focalDistance: 50,
    focalRange: 20
  },
  SSAO: {
    enable: true,
    radius: 2
  }
}

​
Camera Control

Customize the 3D viewpoint: 
viewControl: {
  projection: 'perspective',
  autoRotate: true,
  distance: 200,
  alpha: 40,
  beta: 40
}

​
Resources

​
Browser Support

ECharts GL requires WebGL support. It works in:
  • Chrome 9+
  • Firefox 4+
  • Safari 5.1+
  • Edge (all versions)
  • IE 11 (with limitations)
For the best experience, use a modern browser with WebGL 2.0 support.

Build docs developers (and LLMs) love

Get started for freeTalk to us