229Echarts - 3D 柱状图（Bar3D - Global Population）

最新推荐文章于 2024-07-02 10:45:19 发布

杨林伟

最新推荐文章于 2024-07-02 10:45:19 发布

阅读量1k

点赞数 2

分类专栏： # Echarts

本文链接：https://blog.csdn.net/qq_20042935/article/details/89875882

版权

Echarts 专栏收录该内容

280 篇文章 36 订阅

订阅专栏

效果图

在这里插入图片描述

源代码


$.getJSON('data-gl/asset/data/population.json', function (data) {

    data = data.filter(function (dataItem) {
        return dataItem[2] > 0;
    }).map(function (dataItem) {
        return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
    });

    myChart.setOption({
        backgroundColor: '#cdcfd5',
        geo3D: {
            map: 'world',
            shading: 'lambert',
            light: {
                main: {
                    intensity: 5,
                    shadow: true,
                    shadowQuality: 'high',
                    alpha: 30
                },
                ambient: {
                    intensity: 0
                },
                ambientCubemap: {
                    texture: 'data-gl/asset/canyon.hdr',
                    exposure: 1,
                    diffuseIntensity: 0.5
                }
            },
            viewControl: {
                distance: 50,
                panMouseButton: 'left',
                rotateMouseButton: 'right'
            },
            groundPlane: {
                show: true,
                color: '#999'
            },
            postEffect: {
                enable: true,
                bloom: {
                    enable: false
                },
                SSAO: {
                    radius: 1,
                    intensity: 1,
                    enable: true
                },
                depthOfField: {
                    enable: false,
                    focalRange: 10,
                    blurRadius: 10,
                    fstop: 1
                }
            },
            temporalSuperSampling: {
                enable: true
            },
            itemStyle: {
            },

            regionHeight: 2
        },
        visualMap: {
            max: 40,
            calculable: true,
            realtime: false,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        series: [{
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            shading: 'lambert',
            data: data,
            barSize: 0.1,
            minHeight: 0.2,
            silent: true,
            itemStyle: {
                color: 'orange'
                // opacity: 0.8
            }
        }]
    });
});