### GraphGL Layout Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/graphGL-layoutCPU.html

This code initializes an ECharts chart and configures two graphGL series. One uses GPU-accelerated forceAtlas2 layout, while the other uses CPU-based forceAtlas2 layout. It also includes event handlers for starting and stopping the layout and for window resizing.

```javascript
var chart = echarts.init(document.getElementById('main'));

function createNodes(widthCount, heightCount) {
    var nodes = [];
    for (var i = 0; i < widthCount; i++) {
        for (var j = 0; j < heightCount; j++) {
            nodes.push({ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, value: 1 });
        }
    }
    return nodes;
}

function createEdges(widthCount, heightCount) {
    var edges = [];
    for (var i = 0; i < widthCount; i++) {
        for (var j = 0; j < heightCount; j++) {
            if (i < widthCount - 1) {
                edges.push({ source: i + j * widthCount, target: i + 1 + j * widthCount, value: 1 });
            }
            if (j < heightCount - 1) {
                edges.push({ source: i + j * widthCount, target: i + (j + 1) * widthCount, value: 1 });
            }
        }
    }
    return edges;
}

var nodes = createNodes(10, 20);
var edges = createEdges(10, 20);

chart.setOption({
    series: [
        {
            type: 'graphGL',
            nodes: nodes,
            edges: edges,
            itemStyle: {
                color: 'rgba(255,255,255,0.8)'
            },
            lineStyle: {
                color: 'rgba(255,255,255,0.8)',
                width: 3
            },
            forceAtlas2: {
                GPU: true,
                steps: 10,
                jitterTolerence: 10,
                edgeWeightInfluence: 0
            }
        },
        {
            type: 'graphGL',
            nodes: nodes,
            edges: edges,
            itemStyle: {
                color: 'rgba(200,128,0,0.8)'
            },
            lineStyle: {
                color: 'rgba(200,128,0,0.8)',
                width: 3
            },
            forceAtlas2: {
                GPU: false,
                steps: 10,
                jitterTolerence: 10,
                edgeWeightInfluence: 0
            }
        }
    ]
});

$('#start-layout').click(function () {
    chart.dispatchAction({
        type: 'graphGLStartLayout'
    });
});

$('#stop-layout').click(function () {
    chart.dispatchAction({
        type: 'graphGLStopLayout'
    });
});

$(window).resize(chart.resize);
```

--------------------------------

### ScatterGL Simple Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/scatterGL-simple.html

This code demonstrates a basic scatter plot with different symbols and sizes using Echarts-GL.

```javascript
var chart = echarts.init(document.getElementById('main')); var iconPath ='path://M292.235-334.88c-0.544-0.205-1.104-0.291-1.65-0.266c0.099-0.433,0.125-0.866,0.086-1.291\ c-0.139-1.541-1.135-2.941-2.675-3.529c-1.584-0.599-3.302-0.173-4.428,0.948c0.446,0.004,0.898,0.088,1.338,0.256\ c2.018,0.763,3.03,3.018,2.269,5.035c-0.281,0.743-0.767,1.35-1.364,1.784c-1.029,0.739-2.397,0.968-3.669,0.484\ c-2.019-0.761-3.031-3.017-2.27-5.035c0.101-0.262,0.227-0.507,0.374-0.739h-0.002c0,0,0,0,0,0.002\ c0.649-1.015,1.206-2.114,1.65-3.285c3.448-9.107-1.14-19.291-10.249-22.741c-9.111-3.449-19.291,1.139-22.741,10.247\ c-0.943,2.485-1.285,5.049-1.099,7.537c0.004,0.082,0.012,0.166,0.02,0.25c0.736,8.456,6.184,16.162,14.651,19.367\ c8.611,3.259,17.962,0.967,24.111-5.104c1.053-1.021,2.641-1.398,4.1-0.847c1.756,0.665,2.749,2.458,2.476,4.241\ c0.657-0.463,1.189-1.12,1.498-1.932C295.478-331.653,294.391-334.064,292.235-334.88z'; chart.setOption({
    backgroundColor: '#fff',
    xAxis: {
        type: 'value',
        min: -1,
        max: 1
    },
    yAxis: {
        type: 'value',
        min: -1,
        max: 1
    },
    series: [
        {
            type: 'scatterGL',
            data: [
                [0, 0]
            ],
            symbolSize: 120,
            symbol: 'rect',
            itemStyle: {
                borderWidth: 2,
                borderColor: '#000'
            }
        },
        {
            type: 'scatterGL',
            data: [
                [0.5, 0]
            ],
            symbolSize: [240, 200],
            symbol: iconPath,
            itemStyle: {
                borderWidth: 2,
                borderColor: '#000'
            }
        },
        {
            type: 'scatterGL',
            data: [
                [-0.5, 0]
            ],
            symbolSize: [240, 200],
            symbol: 'triangle',
            itemStyle: {
                borderWidth: 2,
                borderColor: '#000'
            }
        },
        {
            type: 'scatter',
            data: [
                { value: [-0.5, -0.5], symbolSize: 120, symbol: 'triangle' },
                { value: [0, -0.5], symbolSize: 120, symbol: 'rect' },
                { value: [0.5, -0.5], symbolSize: [120, 100], symbol: iconPath }
            ]
        }
    ]
});
```

--------------------------------

### Basic Usage

Source: https://github.com/ecomfe/echarts-gl/blob/master/README.md

A basic example demonstrating how to initialize a chart and set options for a 3D scatter plot.

```javascript
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    series: [{
        type: 'scatter3D',
        symbolSize: 50,
        data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
        itemStyle: {
            opacity: 1
        }
    }]
})
```

--------------------------------

### Map3D Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/mapbox-map3D.html

This code snippet initializes an Echarts instance, fetches data, and configures a 3D map using Mapbox integration.

```javascript
mapboxgl.accessToken = window.location.search.slice(1);
var chart = echarts.init(document.getElementById('main'));
$.getJSON('./data/alcohol.json', function (data) {
    chart.setOption({
        visualMap: {
            show: false,
            max: 1000,
            calculable: true,
            realtime: false,
            inRange: {
                color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        mapbox3D: {
            center: [104.114129, 37.550339],
            zoom: 3,
            pitch: 50,
            bearing: -10,
            style: 'mapbox://styles/mapbox/light-v9',
            altitudeScale: 1e5,
            postEffect: {
                enable: true,
                screenSpaceAmbientOcclusion: {
                    enable: true,
                    intensity: 1,
                    radius: 3,
                    quality: 'high'
                }
            },
            light: {
                main: {
                    intensity: 1,
                    shadow: true,
                    shadowQuality: 'high'
                },
                ambient: {
                    intensity: 0.
                },
                ambientCubemap: {
                    texture: 'asset/canyon.hdr',
                    exposure: 2,
                    diffuseIntensity: 0.5
                }
            }
        },
        series: [
            {
                type: 'map3D',
                coordinateSystem: 'mapbox3D',
                map: 'china',
                regionHeight: 0.5,
                shading: 'lambert'
            }
        ]
    });
});
window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### linesGL Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/linesGL.html

JavaScript code to initialize ECharts, load flight data, and render linesGL on a geo coordinate system.

```javascript
var chart = echarts.init(document.getElementById('main'));
$.getJSON('data/flights2.json', function (data) {
    // Airport: [name, city, country, longitude, latitude]
    function getAirportCoord(idx) {
        return [data.airports[idx][3], data.airports[idx][4]];
    }

    var routes = data.routes.map(function (airline) {
        return [
            getAirportCoord(airline[1]),
            getAirportCoord(airline[2])
        ];
    });

    chart.setOption({
        progressiveStep: 5000,
        backgroundColor: '#003',
        geo: {
            map: 'world',
            left: 0,
            right: 0,
            silent: true,
            roam: true,
            itemStyle: {
                normal: {
                    borderColor: '#003',
                    color: '#005'
                }
            }
        },
        series: [{
            type: 'linesGL',
            coordinateSystem: 'geo',
            blendMode: 'lighter',
            data: routes,
            lineStyle: {
                curveness: 0.2,
                opacity: 0.05
            }
        }]
    });

    window.onresize = chart.resize;
});
```

--------------------------------

### Geo3D Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/geo3D-complex.html

JavaScript code to register a custom map and initialize a Geo3D chart.

```javascript
var points = [123.046875, 39.5302734375, 123.0458984375, 39.5302734375, 123.0458984375, 39.53125, 123.0458984375, 39.53125, 123.0458984375, 39.53125, 123.046875, 39.53125, 123.046875, 39.53125, 123.0478515625, 39.53125, 123.0478515625, 39.53125, 123.0478515625, 39.5302734375, 123.048828125, 39.5302734375, 123.048828125, 39.5302734375, 123.048828125, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.048828125, 39.529296875, 123.048828125, 39.529296875, 123.048828125, 39.529296875, 123.0478515625, 39.5302734375, 123.046875, 39.53125, 123.046875, 39.53125, 123.046875, 39.5302734375]; var exterior = []; for (var i = 0; i < points.length;) { exterior.push([points[i++], points[i++]]); } // var canvas = document.createElement('canvas'); // var ctx = canvas.getContext('2d'); // canvas.width = 500; // canvas.height = 500; // canvas.style.cssText = 'position:absolute;left:0;top:0;z-index:100'; // document.body.appendChild(canvas); // ctx.translate(-200, -300); // ctx.strokeStyle = '#fff'; // ctx.beginPath(); // ctx.moveTo(exterior[0][0], exterior[0][1]); // for (var i = 1; i < exterior.length; i++) { // ctx.lineTo(exterior[i][0], exterior[i][1]); // } // ctx.closePath(); // ctx.stroke(); echarts.registerMap('sample', { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [exterior] }, properties: { name: 'Dude' } }] }) var chart = echarts.init(document.getElementById('main')); chart.setOption({ geo3D: { map: 'sample', bevelSize: 1, itemStyle: { borderColor: '#222', borderWidth: 1 } }, series: [] }); window.addEventListener('resize', function () { chart.resize(); });
```

--------------------------------

### Map3D Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/map3D.html

This code snippet initializes a Map3D chart using Echarts-GL, loads world population data, and configures various visual and interactive properties.

```javascript
var chart = echarts.init(document.getElementById('main'));
$.getJSON('data/world-population.json', function (data) {
    var max = -Infinity;
    var min = Infinity;
    data.forEach(function (item) {
        max = Math.max(Math.log(item.value), max);
        min = Math.min(Math.log(item.value), min);
    });
    var regionData = data.map(function (item) {
        return {
            name: item.name,
            // value: item[1]
            height: (Math.log(item.value) - min) / (max - min) * 3
        }
    })
    chart.setOption({
        toolbox: {
            feature: {
                myExportObj: {
                    title: 'Export OBJ',
                    icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
                    onclick: function () {
                        var res = echarts.exportGL2OBJ(chart, {
                            mainType: 'series',
                            subType: 'map3D',
                            index: 0
                        }, {
                            mtllib: 'geo3D'
                        });
                        download(res.obj, 'geo3D.obj', 'text/plain');
                        download(res.mtl, 'geo3D.mtl', 'text/plain');
                        res.textures.forEach(function (texture) {
                            download(texture.data, texture.file, 'image/png');
                        });
                    }
                }
            }
        },
        backgroundColor: '#cdcfd5',
        // visualMap: {
        // min: 0,
        // max: 15,
        // realtime: true,
        // calculable : true,
        // inRange: {
        // color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        // }
        // },
        series: [
            {
                type: 'map3D',
                map: 'world',
                shading: 'lambert',
                realisticMaterial: {
                    roughness: 0.2,
                    metalness: 0
                },
                postEffect: {
                    enable: true,
                    SSAO: {
                        enable: true,
                        radius: 2,
                        intensity: 1
                    }
                },
                groundPlane: {
                    show: true
                },
                light: {
                    main: {
                        intensity: 2,
                        shadow: true,
                        shadowQuality: 'high',
                        alpha: 30
                    },
                    ambient: {
                        intensity: 0
                    },
                    ambientCubemap: {
                        texture: 'asset/canyon.hdr',
                        exposure: 2,
                        diffuseIntensity: 1
                    }
                },
                viewControl: {
                    distance: 50,
                    panMouseButton: 'left',
                    rotateMouseButton: 'right'
                },
                itemStyle: {
                    coilor: '#333'
                    // borderColor: '#222',
                    // borderWidth: 1
                },
                regionHeight: 1,
                data: regionData
            }
        ]
    });
});
window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### Map3D Bar Chart Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/maptalks-bar3D.html

This code initializes an ECharts instance, fetches JSON data, processes it, and sets up a 3D bar chart using maptalks3D.

```javascript
var chart = echarts.init(document.getElementById('main'));
$.getJSON('./data/population.json', function (data) {
    data = data.filter(function (dataItem) {
        return dataItem[2] > 0;
    }).map(function (dataItem) {
        return [dataItem[0], dataItem[1], dataItem[2]];
    });
    chart.setOption({
        visualMap: {
            show: false,
            max: 1000,
            calculable: true,
            realtime: false,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        maptalks3D: {
            center: [104.114129, 37.550339],
            zoom: 3,
            pitch: 50,
            bearing: -10,
            boxHeight: 50,
            // altitudeScale: 1e2,
            postEffect: {
                enable: true,
                screenSpaceAmbientOcclusion: {
                    enable: true,
                    radius: 2
                }
            },
            light: {
                main: {
                    intensity: 2,
                    shadow: true,
                    shadowQuality: 'high'
                },
                ambient: {
                    intensity: 0.
                },
                ambientCubemap: {
                    texture: 'asset/canyon.hdr',
                    exposure: 2,
                    diffuseIntensity: 0.5
                }
            }
        },
        series: [{
            type: 'bar3D',
            coordinateSystem: 'maptalks3D',
            shading: 'lambert',
            minHeight: 0.1,
            barSize: 0.1,
            data: data,
            silent: true,
            animationEasingUpdate: 2000
        }]
    });
});
window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### Globe Contour Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/globe-contour.html

This code snippet demonstrates how to create a globe with contour lines using Echarts-GL. It includes setup for canvas, dat.GUI for controls, image loading, contour calculation using d3.contours, and Echarts initialization with globe configuration.

```javascript
var config = { color: '#c0101a', levels: 1, intensity: 8, threshold: 0.01 }
var canvas = document.createElement('canvas');
canvas.width = 4096;
canvas.height = 2048;
context = canvas.getContext("2d");
context.lineWidth = 0.5;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;

var gui = new dat.GUI();

image("asset/bathymetry_bw_composite_4k.jpg").then(function(image) {
    var m = image.height,
        n = image.width,
        values = new Array(n * m),
        contours = d3.contours().size([n, m]).smooth(true),
        projection = d3.geoIdentity().scale(canvas.width / n),
        path = d3.geoPath(projection, context);

    StackBlur.R(image, 5);

    for (var j = 0, k = 0; j < m; ++j) {
        for (var i = 0; i < n; ++i, ++k) {
            values[k] = image.data[(k << 2)] / 255;
        }
    }

    var option = { image: canvas }
    var results = []

    function update(threshold, levels) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        var thresholds = [];
        for (var i = 0; i < levels; i++) {
            thresholds.push((threshold + 1 / levels * i) % 1);
        }
        results = contours.thresholds(thresholds)(values);
        redraw();
    }

    function redraw() {
        results.forEach(function (d, idx) {
            context.beginPath();
            path(d);
            context.globalAlpha = 1;
            context.stroke();
            if (idx > config.levels / 5 * 3) {
                context.globalAlpha = 0.01;
                context.fill();
            }
        });
        option.onupdate();
    }

    d3.timer(function(t) {
        var threshold = (t % 10000) / 10000;
        update(threshold, 1);
    });

    initCharts(option);
    update(config.threshold, config.levels);

    // gui.add(config, 'levels', 0, 100).step(1).onFinishChange(function () {
    // update(config.threshold, config.levels);
    // });
    // gui.add(config, 'threshold', 0, 1.00).onFinishChange(function () {
    // update(config.threshold, config.levels);
    // });

    gui.addColor(config, 'color').onChange(function () {
        context.strokeStyle = context.fillStyle = context.shadowColor = config.color;
        redraw();
    });
});

function image(url) {
    return new Promise(function(resolve) {
        var image = new Image;
        image.src = url;
        image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width / 4;
            canvas.height = image.height / 4;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            resolve(context.getImageData(0, 0, canvas.width, canvas.height));
        };
    });
}

var chart;
function initCharts(option) {
    chart = echarts.init(document.getElementById('main'));
    var contourChart = echarts.init(document.createElement('canvas'), null, { width: 4096, height: 2048 });
    var img = new echarts.graphic.Image({
        style: {
            image: option.image,
            x: -1,
            y: -1,
            width: option.image.width + 2,
            height: option.image.height + 2
        }
    });
    contourChart.getZr().add(img);
    option.onupdate = function () {
        img.dirty();
    }

    // https://www.behance.net/gallery/50293671/T-GLOBEhttps://bl.ocks.org/mbostock/818053c76d79d4841790c332656bf9da
    chart.setOption({
        globe: {
            // environment: 'asset/starfield.jpg',
            heightTexture: 'asset/bathymetry_bw_composite_4k.jpg',
            displacementScale: 0.05,
            displacementQuality: 'high',
            baseColor: '#111',
            shading: 'realistic',
            realisticMaterial: {
                roughness: 0.2,
                metalness: 0
            },
            postEffect: {
                enable: false,
                depthOfField: {
                    enable: true
                },
                bloom: {
                    intensity: 0.05
                }
            },
            temporalSuperSampling: {
                enable: true
            },
            light: {
                ambient: {
                    intensity: 0
                },
                main: {
                    intensity: 0.1,
                    shadow: false
                },
                ambientCubemap: {
                    texture: 'asset/lake.hdr',
                    exposure: 1,
                    diffuseIntensity: 0.5,
                    specularIntensity: 2
                }
            },
            viewControl: {
                autoRotate: false
            },
            layers: [
                {
                    type: 'blend',
                    blendTo: 'emission',
                    texture: contourChart,
                    intensity: config.intensity
                }
            ]
        }
    });

    window.addEventListener('resize', function () {
        chart.resize();
    });

    gui.add(config, 'intensity', 0, 10).onChange(function () {
        chart.setOption({
            globe: {
                layers: [
                    {
                        intensity: config.intensity
                    }
                ]
            }
        })
    });
}

```

--------------------------------

### 3D Bar Chart Initialization and Configuration

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/bar3D-non-zero.html

This snippet initializes an ECharts instance, defines data for hours and days, and sets up a 3D bar chart with visual mapping, axes, grid properties, and lighting.

```javascript
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
chart.setOption({
    backgroundColor: '#fff',
    tooltip: {},
    visualMap: {
        max: 20,
        color: ['#d94e5d','#eac736','#50a3ba']
    },
    xAxis3D: {
        type: 'category',
        data: hours
    },
    yAxis3D: {
        type: 'category',
        data: days
    },
    zAxis3D: {
        type: 'value',
        min: 1
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        environment: 'none',
        viewControl: {
            // projection: 'orthographic'
        },
        light: {
            main: {
                shadow: true
            },
            ambient: {
                intensity: 0
            },
            ambientCubemap: {
                texture: 'asset/pisa.hdr',
                diffuseIntensity: 1
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data.map(function (item) {
            return {
                value: [item[1], item[0], item[2]],
                label: { show: item[2] != 0 }
            }
        }),
        shading: 'lambert',
        label: {
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]
});

window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### Geo3D Initialization and Configuration

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/geo3D-simple.html

This snippet shows how to register a custom map for Geo3D and initialize an ECharts instance with basic Geo3D options.

```javascript
echarts.registerMap('sample', { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'MultiPolygon', coordinates: [ [[ [0, 0], [10, 0], [10, 10], [0, 10] ].reverse(), // Hole [ [2, 2], [8, 2], [8, 8], [2, 8] ] ],[ [ [20, 20], [30, 20], [30, 30], [20, 30] ].reverse() ] ] }, properties: { name: 'Sample Rect' } }] })
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    geo3D: {
        map: 'sample',
        bevelSize: 1
    },
    series: []
});
window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### Install with npm

Source: https://github.com/ecomfe/echarts-gl/blob/master/README.md

Install ECharts and ECharts-GL using npm.

```bash
npm install echarts
npm install echarts-gl
```

--------------------------------

### Minimal Import

Source: https://github.com/ecomfe/echarts-gl/blob/master/README.md

Import only necessary modules for a minimal setup.

```javascript
import * as echarts from 'echarts/core';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';

echarts.use([Scatter3DChart, Grid3DComponent]);
```

--------------------------------

### 3D Bar Chart Initialization and Configuration

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/bar3D-transparent.html

This JavaScript code initializes an ECharts instance, defines data for hours and days, and configures a 3D bar chart with visual mapping, axis settings, and series options. It also includes a resize event listener.

```javascript
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
chart.setOption({
    visualMap: {
        max: 20,
        color: ['#d94e5d','#eac736','#50a3ba']
    },
    xAxis3D: {
        type: 'category',
        data: hours,
        axisLabel: {
            interval: 2
        }
    },
    yAxis3D: {
        type: 'category',
        data: days
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data.map(function (item) {
            return {
                value: [item[1], item[0], item[2]],
                itemStyle: {
                    opacity: item[2] / 20
                }
            };
        }),
        bevelSize: 0.2,
        bevelSmoothness: 2,
        shading: 'color',
        label: {
            textStyle: {
            }
        },
        emphasis: {
            itemStyle: {
                opacity: 1
            }
        }
    }]
});
window.addEventListener('resize', function () {
    chart.resize();
});
```

--------------------------------

### JavaScript Initialization and Data Loading

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/mapbox-taxi.html

Initializes Mapbox access token, Echarts instance, and defines a function to decode line data. It also sets up a Promise to load shapefile data for buildings.

```javascript
mapboxgl.accessToken = window.location.search.slice(1);
var chart = echarts.init(document.getElementById('main'));
var ENCODE_SCALE = 1e6;
function decodeLine(line) {
    var result = [];
    var prevX = line[0];
    var prevY = line[1];
    for (var i = 0; i < line[2].length; i += 2) {
        var x = line[2].charCodeAt(i) - 64;
        var y = line[2].charCodeAt(i + 1) - 64;
        // ZigZag decoding
        x = (x >> 1) ^ (-(x & 1));
        y = (y >> 1) ^ (-(y & 1));
        // Delta deocding
        x += prevX;
        y += prevY;
        prevX = x;
        prevY = y;
        // Dequantize
        result.push([x / ENCODE_SCALE, y / ENCODE_SCALE]);
    }
    return result;
}

var geoJSON = {
    features: []
};
var regions = [];
var readShp = new Promise(function (resolve, reject) {
    shapefile.open('data/buildings-capetown.shp', 'data/buildings-capetown.dbf')
        .then(source => source.read()
            .then(function append(result) {
                if (result.done) {
                    resolve();
                    return;
                }
                var feature = result.value;
                feature.properties.name = geoJSON.features.length + '';
                regions.push({
                    name: geoJSON.features.length + '',
                    value: 1,
                    height: feature.properties.SHAPE_leng * 10000
                })
                geoJSON.features.push(feature);
                return source.read().then(append);
            })
        );
});

Promise.all([
    $.getJSON('data/taxi-routes-capetown.json'),
    readShp
])
```

--------------------------------

### Transparent Surface Example

Source: https://github.com/ecomfe/echarts-gl/blob/master/test/surface-transparent.html

JavaScript code to initialize an ECharts GL chart with a transparent surface.

```javascript
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    visualMap: {
        show: false,
        dimension: 2,
        min: -1,
        max: 1,
        inRange: {
            color: [
                '#313695',
                '#4575b4',
                '#74add1',
                '#abd9e9',
                '#e0f3f8',
                '#ffffbf',
                '#fee090',
                '#fdae61',
                '#f46d43',
                '#d73027',
                '#a50026'
            ],
            colorAlpha: [
                0.2,
                1
            ]
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        viewControl: {
            // projection: 'orthographic'
        }
    },
    series: [
        {
            type: 'surface',
            shading: 'color',
            wireframe: {
                // show: false
            },
            equation: {
                x: {
                    step: 0.05
                },
                y: {
                    step: 0.05
                },
                z: function (x, y) {
                    if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                        return '-';
                    }
                    return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
                }
            }
        }
    ]
});

window.addEventListener('resize', function () {
    chart.resize();
});
```