世界各国人口增长情况echarts 地图配置项内容和展示

echarts结果echarts-gl绘制的3D球面柱状图,反应世界各国人口增长情况,数据纯属虚构

配置项如下
      var uploadedDataURL = '/asset/get/s/data-1625545136350-oWFk_ystL.json';
var jwdInfo = [
    { name: '日本', value: [139.46, 35.42, 15] },
    { name: '阿富汗', value: [69.11, 34.28, 13] },
    { name: '阿尔巴尼亚', value: [19.49, 41.18, 11] },
    { name: '阿尔及利亚', value: [3.08, 36.42, 12] },
    { name: '美属萨摩亚', value: [-170.43, -14.16, 17] },
    { name: '安道尔', value: [1.32, 42.31, 10] },
    { name: '安哥拉', value: [13.15, -8.5, 15] },
    { name: '安提瓜和巴布达', value: [-61.48, 17.2, 16] },
    { name: '阿根廷', value: [-60, -36.3, 17] },
    { name: '亚美尼亚', value: [44.31, 40.1, 14] },
    { name: '阿鲁巴', value: [-70.02, 12.32, 11] },
    { name: '澳大利亚', value: [149.08, -35.15, 11] },
    { name: '奥地利', value: [16.22, 48.12, 15] },
    { name: '阿塞拜疆', value: [49.56, 40.29, 11] },
    { name: '巴哈马', value: [-77.2, 25.05, 14] },
    { name: '巴林', value: [50.3, 26.1, 19] },
    { name: '孟加拉国', value: [90.26, 23.43, 19] },
    { name: '巴巴多斯', value: [-59.3, 13.05, 13] },
    { name: '白俄罗斯', value: [27.3, 53.52, 19] },
    { name: '比利时', value: [4.21, 50.51, 19] },
    { name: '伯利兹', value: [-88.3, 17.18, 17] },
    { name: '贝宁', value: [2.42, 6.23, 12] },
    { name: '不丹', value: [89.45, 27.31, 11] },
    { name: '玻利维亚', value: [-68.1, -16.2, 11] },
    { name: '波斯尼亚和黑塞哥维那', value: [18.26, 43.52, 16] },
    { name: '博茨瓦纳', value: [25.57, -24.45, 19] },
    { name: '巴西', value: [-47.55, -15.47, 19] },
    { name: '英属维尔京群岛', value: [-64.37, 18.27, 16] },
    { name: '文莱', value: [115, 4.52, 18] },
    { name: '保加利亚', value: [23.2, 42.45, 19] },
    { name: '布基纳法索', value: [-1.3, 12.15, 12] },
    { name: '布隆迪', value: [29.18, -3.16, 18] },
    { name: '柬埔寨', value: [104.55, 11.33, 11] },
    { name: '喀麦隆', value: [11.35, 3.5, 15] },
    { name: '加拿大', value: [-75.42, 45.27, 18] },
    { name: '佛得角', value: [-23.34, 15.02, 16] },
    { name: '开曼群岛', value: [-81.24, 19.2, 19] },
    { name: '中非共和国', value: [18.35, 4.23, 16] },
    { name: '乍得', value: [14.59, 12.1, 14] },
    { name: '智利', value: [-70.4, -33.24, 14] },
    { name: '中国', value: [116.2, 39.55, 15] },
    { name: '哥伦比亚', value: [-74, 4.34, 12] },
    { name: '科摩罗', value: [43.16, -11.4, 18] },
    { name: '刚果', value: [15.12, -4.09, 13] },
    { name: '哥斯达黎加', value: [-84.02, 9.55, 10] },
    { name: '科特迪瓦', value: [-5.17, 6.49, 17] },
    { name: '克罗地亚', value: [15.58, 45.5, 19] },
    { name: '古巴', value: [-82.22, 23.08, 11] },
    { name: '塞浦路斯', value: [33.25, 35.1, 18] },
    { name: '捷克共和国', value: [14.22, 50.05, 15] },
    { name: '朝鲜', value: [125.3, 39.09, 10] },
    { name: '刚果(扎伊尔)', value: [15.15, -4.2, 10] },
    { name: '丹麦', value: [12.34, 55.41, 17] },
    { name: '吉布提', value: [42.2, 11.08, 15] },
    { name: '多米尼加', value: [-61.24, 15.2, 13] },
    { name: '多米尼加共和国', value: [-69.59, 18.3, 18] },
    { name: '东帝汶', value: [125.34, -8.29, 12] },
    { name: '厄瓜多尔', value: [-78.35, -0.15, 19] },
    { name: '埃及', value: [31.14, 30.01, 11] },
    { name: '萨尔瓦多', value: [-89.1, 13.4, 18] },
    { name: '赤道几内亚', value: [8.5, 3.45, 11] },
    { name: '厄立特里亚', value: [38.55, 15.19, 10] },
    { name: '爱沙尼亚', value: [24.48, 59.22, 11] },
    { name: '埃塞俄比亚', value: [38.42, 9.02, 11] },
    { name: '福克兰群岛(马尔维纳斯群岛)', value: [-59.51, -51.4, 15] },
    { name: '法罗群岛', value: [-6.56, 62.05, 19] },
    { name: '斐济', value: [178.3, -18.06, 14] },
    { name: '芬兰', value: [25.03, 60.15, 15] },
    { name: '法国', value: [2.2, 48.5, 16] },
    { name: '法属圭亚那', value: [-52.18, 5.05, 12] },
    { name: '法属波利尼西亚', value: [-149.34, -17.32, 18] },
    { name: '加蓬', value: [9.26, 0.25, 14] },
    { name: '冈比亚', value: [-16.4, 13.28, 18] },
    { name: '格鲁吉亚', value: [44.5, 41.43, 12] },
    { name: '德国', value: [13.25, 52.3, 11] },
    { name: '加纳', value: [-0.06, 5.35, 17] },
    { name: '希腊', value: [23.46, 37.58, 12] },
    { name: '格陵兰', value: [-51.35, 64.1, 12] },
    { name: '瓜德罗普岛', value: [-61.44, 16, 14] },
    { name: '危地马拉', value: [-90.22, 14.4, 19] },
    { name: '根西岛', value: [-2.33, 49.26, 11] },
    { name: '几内亚', value: [-13.49, 9.29, 15] },
    { name: '几内亚比绍', value: [-15.45, 11.45, 12] },
    { name: '圭亚那', value: [-58.12, 6.5, 18] },
    { name: '海地', value: [-72.2, 18.4, 18] },
    { name: '赫德岛和麦当劳群岛', value: [74, -53, 18] },
    { name: '洪都拉斯', value: [-87.14, 14.05, 11] },
    { name: '匈牙利', value: [19.05, 47.29, 10] },
    { name: '冰岛', value: [-21.57, 64.1, 14] },
    { name: '印度', value: [77.13, 28.37, 18] },
    { name: '印度尼西亚', value: [106.49, -6.09, 15] },
    { name: '伊朗', value: [51.3, 35.44, 17] },
    { name: '伊拉克', value: [44.3, 33.2, 19] },
    { name: '爱尔兰', value: [-6.15, 53.21, 16] },
    { name: '以色列', value: [35.12, 31.47, 11] },
    { name: '意大利', value: [12.29, 41.54, 12] },
    { name: '牙买加', value: [-76.5, 18, 18] },
    { name: '约旦', value: [35.52, 31.57, 15] },
    { name: '哈萨克斯坦', value: [71.3, 51.1, 16] },
    { name: '肯尼亚', value: [36.48, -1.17, 11] },
    { name: '基里巴斯', value: [173, 1.3, 18] },
    { name: '科威特', value: [48, 29.3, 12] },
    { name: '吉尔吉斯斯坦', value: [74.46, 42.54, 10] },
    { name: '老挝', value: [102.36, 17.58, 19] },
    { name: '拉脱维亚', value: [24.08, 56.53, 15] },
    { name: '黎巴嫩', value: [35.31, 33.53, 14] },
    { name: '莱索托', value: [27.3, -29.18, 17] },
    { name: '利比里亚', value: [-10.47, 6.18, 12] },
    { name: '阿拉伯利比亚民众国', value: [13.07, 32.49, 16] },
    { name: '列支敦士登', value: [9.31, 47.08, 17] },
    { name: '立陶宛', value: [25.19, 54.38, 11] },
    { name: '卢森堡', value: [6.09, 49.37, 12] },
    { name: '马达加斯加', value: [47.31, -18.55, 11] },
    { name: '马拉维', value: [33.48, -14, 18] },
    { name: '马来西亚', value: [101.41, 3.09, 16] },
    { name: '马尔代夫', value: [73.28, 4, 12] },
    { name: '马里', value: [-7.55, 12.34, 10] },
    { name: '马耳他', value: [14.31, 35.54, 10] },
    { name: '马提尼克岛', value: [-61.02, 14.36, 10] },
    { name: '毛里塔尼亚', value: [57.3, -20.1, 14] },
    { name: '马约特岛', value: [45.14, -12.48, 17] },
    { name: '墨西哥', value: [-99.1, 19.2, 10] },
    { name: '密克罗尼西亚(联邦) ', value: [158.09, 6.55, 11] },
    { name: '摩尔多瓦共和国', value: [28.5, 47.02, 13] },
    { name: '莫桑比克', value: [32.32, -25.58, 11] },
    { name: '缅甸', value: [96.2, 16.45, 10] },
    { name: '纳米比亚', value: [17.04, -22.35, 17] },
    { name: '尼泊尔', value: [85.2, 27.45, 11] },
    { name: '荷兰', value: [4.54, 52.23, 12] },
    { name: '荷属安的列斯', value: [-69, 12.05, 14] },
    { name: '新喀里多尼亚', value: [166.3, -22.17, 15] },
    { name: '新西兰', value: [174.46, -41.19, 10] },
    { name: '尼加拉瓜', value: [-86.2, 12.06, 17] },
    { name: '尼日尔', value: [2.06, 13.27, 16] },
    { name: '尼日利亚', value: [7.32, 9.05, 16] },
    { name: '诺福克岛', value: [168.43, -45.2, 13] },
    { name: '北马里亚纳群岛', value: [145.45, 15.12, 18] },
    { name: '挪威', value: [10.45, 59.55, 12] },
    { name: '阿曼', value: [58.36, 23.37, 18] },
    { name: '巴基斯坦', value: [73.1, 33.4, 10] },
    { name: '帕劳', value: [134.28, 7.2, 13] },
    { name: '巴拿马', value: [-79.25, 9, 17] },
    { name: '巴布亚新几内亚', value: [147.08, -9.24, 13] },
    { name: '巴拉圭', value: [-57.3, -25.1, 18] },
    { name: '秘鲁', value: [-77, -12, 12] },
    { name: '菲律宾', value: [121.03, 14.4, 14] },
    { name: '波兰', value: [21, 52.13, 15] },
    { name: '葡萄牙', value: [-9.1, 38.42, 12] },
    { name: '波多黎各', value: [-66.07, 18.28, 16] },
    { name: '卡塔尔', value: [51.35, 25.15, 11] },
    { name: '韩国', value: [126.58, 37.31, 18] },
    { name: '罗马尼亚', value: [26.1, 44.27, 12] },
    { name: '俄罗斯', value: [37.35, 55.45, 16] },
    { name: '卢旺达', value: [30.04, -1.59, 11] },
    { name: '圣基茨和尼维斯', value: [-62.43, 17.17, 15] },
    { name: '圣卢西亚', value: [-60.58, 14.02, 16] },
    { name: '圣皮埃尔和密克隆', value: [-56.12, 46.46, 14] },
    { name: '圣文森特和格林纳丁斯', value: [-61.1, 13.1, 18] },
    { name: '萨摩亚', value: [-171.5, -13.5, 19] },
    { name: '圣马力诺', value: [12.3, 43.55, 11] },
    { name: '圣多美和普林西比', value: [6.39, 0.1, 15] },
    { name: '沙特阿拉伯', value: [46.42, 24.41, 19] },
    { name: '塞内加尔', value: [-17.29, 14.34, 12] },
    { name: '塞拉利昂', value: [-13.17, 8.3, 19] },
    { name: '斯洛伐克', value: [17.07, 48.1, 13] },
    { name: '斯洛文尼亚', value: [14.33, 46.04, 13] },
    { name: '所罗门群岛', value: [159.57, -9.27, 11] },
    { name: '索马里', value: [45.25, 2.02, 16] },
    { name: '比勒陀利亚', value: [28.12, -25.44, 19] },
    { name: '西班牙', value: [-3.45, 40.25, 12] },
    { name: '苏丹', value: [32.35, 15.31, 17] },
    { name: '苏里南', value: [-55.1, 5.5, 17] },
    { name: '斯威士兰', value: [31.06, -26.18, 12] },
    { name: '瑞典', value: [18.03, 59.2, 19] },
    { name: '瑞士', value: [7.28, 46.57, 19] },
    { name: '阿拉伯叙利亚共和国', value: [36.18, 33.3, 19] },
    { name: '塔吉克斯坦', value: [68.48, 38.33, 15] },
    { name: '泰国', value: [100.35, 13.45, 16] },
    { name: '马其顿', value: [21.26, 42.01, 16] },
    { name: '多哥', value: [1.2, 6.09, 19] },
    { name: '汤加', value: [-174, -21.1, 12] },
    { name: '突尼斯', value: [10.11, 36.5, 16] },
    { name: '土耳其', value: [32.54, 39.57, 19] },
    { name: '土库曼斯坦', value: [57.5, 38, 14] },
    { name: '图瓦卢', value: [179.13, -8.31, 13] },
    { name: '乌干达', value: [32.3, 0.2, 12] },
    { name: '乌克兰', value: [30.28, 50.3, 17] },
    { name: '阿联酋', value: [54.22, 24.28, 12] },
    { name: '英国', value: [-0.05, 51.36, 13] },
    { name: '坦桑尼亚', value: [35.45, -6.08, 11] },
    { name: '美国', value: [-77.02, 39.91, 14] },
    { name: '美属维尔京群岛', value: [-64.56, 18.21, 19] },
    { name: '乌拉圭', value: [-56.11, -34.5, 18] },
    { name: '乌兹别克斯坦', value: [69.1, 41.2, 13] },
    { name: '瓦努阿图', value: [168.18, -17.45, 19] },
    { name: '委内瑞拉', value: [-66.55, 10.3, 16] },
    { name: '越南', value: [105.55, 21.05, 11] },
    { name: '南斯拉夫', value: [20.37, 44.5, 13] },
    { name: '赞比亚', value: [28.16, -15.28, 14] },
    { name: '津巴布韦', value: [31.02, -17.43, 19] },
];

var baseTexture = null;
var option = null;
var geoJson = null;
// 请求world.json文件
function getGeoJsonData() {
    $.getJSON(uploadedDataURL, function (jsonObj) {
        geoJson = jsonObj;
        getBaseTexture();
    });
}

// 生成球面纹理
function getBaseTexture() {
    echarts.registerMap('world', geoJson);
    let canvas = document.createElement('canvas');
    baseTexture = echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
    });
    baseTexture.setOption({
        backgroundColor: '#001213',
        series: [
            {
                type: 'map',
                map: 'world',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                boundingCoords: [
                    [-180, 90],
                    [180, -90],
                ],
                label: {
                    show: false,
                    textStyle: {
                        color: '#fff',
                        fontSize: 20,
                    },
                },
                itemStyle: {
                    areaColor: '#004444',
                    borderColor: '#00cccc',
                    borderWidth: 2,
                },
            },
        ],
    });
    drawEarth();
}

// 绘制球体
function drawEarth() {
    option = {
        tooltip: {
            show: true,
            backgroundColor: 'rgb(50, 50, 50)',
            borderWidth: 0,
            textStyle: {
                color: '#fff',
                fontSize: 20,
            },
        },
        globe: {
            globeRadius: 100,
            globeOuterRadius: 150,
            silent: true,
            shading: 'color',
            environment: '#000',
            baseTexture: baseTexture,
            viewControl: {
                autoRotate: true,
            },
            light: {
                main: {
                    color: '#fff',
                    intensity: 1,
                    shadow: false,
                    alpha: 55,
                    beta: 10,
                },
                ambient: {
                    color: '#fff',
                    intensity: 1,
                },
                postEffect: {
                    enable: true,
                    SSAO: {
                        enable: true,
                        radius: 10,
                    },
                },
            },
        },
        series: [
            {
                name: '国家人口增长情况',
                type: 'bar3D',
                coordinateSystem: 'globe',
                barSize: 0.8,
                minHeight: 0.1,
                maxHeight: 1,
                data: jwdInfo,
                itemStyle: {
                    color: '#00cccc',
                },
                label: {
                    formatter: (val) => {
                        return val.name;
                    },
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                },
            },
        ],
    };
    myChart.clear();
    myChart.setOption(option, true);
}

getGeoJsonData();

    
截图如下