3d地图echarts 地图配置项内容和展示

      var tip = "/asset/get/s/data-1636941116822-WKsbit16V.png";
var geoCoordMap = {
    阿富汗: [67.709953, 33.93911],
    安哥拉: [17.873887, -11.202692],
    阿尔巴尼亚: [20.168331, 41.153332],
    阿联酋: [53.847818, 23.424076],
    阿根廷: [-63.61667199999999, -38.416097],
    亚美尼亚: [45.038189, 40.069099],
    法属南半球和南极领地: [69.348557, -49.280366],
    澳大利亚: [133.775136, -25.274398],
    奥地利: [14.550072, 47.516231],
    阿塞拜疆: [47.576927, 40.143105],
    布隆迪: [29.918886, -3.373056],
    比利时: [4.469936, 50.503887],
    贝宁: [2.315834, 9.30769],
    布基纳法索: [-1.561593, 12.238333],
    孟加拉国: [90.356331, 23.684994],
    保加利亚: [25.48583, 42.733883],
    巴哈马: [-77.39627999999999, 25.03428],
    波斯尼亚和黑塞哥维那: [17.679076, 43.915886],
    白俄罗斯: [27.953389, 53.709807],
    伯利兹: [-88.49765, 17.189877],
    百慕大: [-64.7505, 32.3078],
    玻利维亚: [-63.58865299999999, -16.290154],
    巴西: [-51.92528, -14.235004],
    文莱: [114.727669, 4.535277],
    不丹: [90.433601, 27.514162],
    博茨瓦纳: [24.684866, -22.328474],
    中非共和国: [20.939444, 6.611110999999999],
    加拿大: [-106.346771, 56.130366],
    瑞士: [8.227511999999999, 46.818188],
    智利: [-71.542969, -35.675147],
    中国: [104.195397, 35.86166],
    象牙海岸: [-5.547079999999999, 7.539988999999999],
    喀麦隆: [12.354722, 7.369721999999999],
    刚果民主共和国: [21.758664, -4.038333],
    刚果共和国: [15.827659, -0.228021],
    哥伦比亚: [-74.297333, 4.570868],
    哥斯达黎加: [-83.753428, 9.748916999999999],
    古巴: [-77.781167, 21.521757],
    北塞浦路斯: [33.429859, 35.126413],
    塞浦路斯: [33.429859, 35.126413],
    捷克共和国: [15.472962, 49.81749199999999],
    德国: [10.451526, 51.165691],
    吉布提: [42.590275, 11.825138],
    丹麦: [9.501785, 56.26392],
    多明尼加共和国: [-70.162651, 18.735693],
    阿尔及利亚: [1.659626, 28.033886],
    厄瓜多尔: [-78.18340599999999, -1.831239],
    埃及: [30.802498, 26.820553],
    厄立特里亚: [39.782334, 15.179384],
    西班牙: [-3.74922, 40.46366700000001],
    爱沙尼亚: [25.013607, 58.595272],
    埃塞俄比亚: [40.489673, 9.145000000000001],
    芬兰: [25.748151, 61.92410999999999],
    斐: [178.065032, -17.713371],
    福克兰群岛: [-59.523613, -51.796253],
    法国: [2.213749, 46.227638],
    加蓬: [11.609444, -0.803689],
    英国: [-3.435973, 55.378051],
    格鲁吉亚: [-82.9000751, 32.1656221],
    加纳: [-1.023194, 7.946527],
    几内亚: [-9.696645, 9.945587],
    冈比亚: [-15.310139, 13.443182],
    几内亚比绍: [-15.180413, 11.803749],
    赤道几内亚: [10.267895, 1.650801],
    希腊: [21.824312, 39.074208],
    格陵兰: [-42.604303, 71.706936],
    危地马拉: [-90.23075899999999, 15.783471],
    法属圭亚那: [-53.125782, 3.933889],
    圭亚那: [-58.93018, 4.860416],
    洪都拉斯: [-86.241905, 15.199999],
    克罗地亚: [15.2, 45.1],
    海地: [-72.285215, 18.971187],
    匈牙利: [19.503304, 47.162494],
    印尼: [113.921327, -0.789275],
    印度: [78.96288, 20.593684],
    爱尔兰: [-8.24389, 53.41291],
    伊朗: [53.688046, 32.427908],
    伊拉克: [43.679291, 33.223191],
    冰岛: [-19.020835, 64.963051],
    以色列: [34.851612, 31.046051],
    意大利: [12.56738, 41.87194],
    牙买加: [-77.297508, 18.109581],
    约旦: [36.238414, 30.585164],
    日本: [138.252924, 36.204824],
    哈萨克斯坦: [66.923684, 48.019573],
    肯尼亚: [37.906193, -0.023559],
    吉尔吉斯斯坦: [74.766098, 41.20438],
    柬埔寨: [104.990963, 12.565679],
    韩国: [127.766922, 35.907757],
    科索沃: [20.902977, 42.6026359],
    科威特: [47.481766, 29.31166],
    老挝: [102.495496, 19.85627],
    黎巴嫩: [35.862285, 33.854721],
    利比里亚: [-9.429499000000002, 6.428055],
    利比亚: [17.228331, 26.3351],
    斯里兰卡: [80.77179699999999, 7.873053999999999],
    莱索托: [28.233608, -29.609988],
    立陶宛: [23.881275, 55.169438],
    卢森堡: [6.129582999999999, 49.815273],
    拉脱维亚: [24.603189, 56.879635],
    摩洛哥: [-7.092619999999999, 31.791702],
    摩尔多瓦: [28.369885, 47.411631],
    马达加斯加: [46.869107, -18.766947],
    墨西哥: [-102.552784, 23.634501],
    马其顿: [21.745275, 41.608635],
    马里: [-3.996166, 17.570692],
    缅甸: [95.956223, 21.913965],
    黑山: [19.37439, 42.708678],
    蒙古: [103.846656, 46.862496],
    莫桑比克: [35.529562, -18.665695],
    毛里塔尼亚: [-10.940835, 21.00789],
    马拉维: [34.301525, -13.254308],
    马来西亚: [101.975766, 4.210484],
    纳米比亚: [18.49041, -22.95764],
    新喀里多尼亚: [165.618042, -20.904305],
    尼日尔: [8.081666, 17.607789],
    尼日利亚: [8.675277, 9.081999],
    尼加拉瓜: [-85.207229, 12.865416],
    荷兰: [5.291265999999999, 52.132633],
    挪威: [8.468945999999999, 60.47202399999999],
    尼泊尔: [84.12400799999999, 28.394857],
    新西兰: [174.885971, -40.900557],
    阿曼: [55.923255, 21.512583],
    巴基斯坦: [69.34511599999999, 30.375321],
    巴拿马: [-80.782127, 8.537981],
    秘鲁: [-75.015152, -9.189967],
    菲律宾: [121.774017, 12.879721],
    巴布亚新几内亚: [143.95555, -6.314992999999999],
    波兰: [19.145136, 51.919438],
    波多黎各: [-66.590149, 18.220833],
    北朝鲜: [127.510093, 40.339852],
    葡萄牙: [-8.224454, 39.39987199999999],
    巴拉圭: [-58.443832, -23.442503],
    卡塔尔: [51.183884, 25.354826],
    罗马尼亚: [24.96676, 45.943161],
    俄罗斯: [105.318756, 61.52401],
    卢旺达: [29.873888, -1.940278],
    西撒哈拉: [-12.885834, 24.215527],
    沙特阿拉伯: [45.079162, 23.885942],
    苏丹: [30.217636, 12.862807],
    南苏丹: [31.3069788, 6.876991899999999],
    塞内加尔: [-14.452362, 14.497401],
    所罗门群岛: [160.156194, -9.64571],
    塞拉利昂: [-11.779889, 8.460555],
    萨尔瓦多: [-88.89653, 13.794185],
    索马里兰: [46.8252838, 9.411743399999999],
    索马里: [46.199616, 5.152149],
    塞尔维亚共和国: [21.005859, 44.016521],
    苏里南: [-56.027783, 3.919305],
    斯洛伐克: [19.699024, 48.669026],
    斯洛文尼亚: [14.995463, 46.151241],
    瑞典: [18.643501, 60.12816100000001],
    斯威士兰: [31.465866, -26.522503],
    叙利亚: [38.996815, 34.80207499999999],
    乍得: [18.732207, 15.454166],
    多哥: [0.824782, 8.619543],
    泰国: [100.992541, 15.870032],
    塔吉克斯坦: [71.276093, 38.861034],
    土库曼斯坦: [59.556278, 38.969719],
    东帝汶: [125.727539, -8.874217],
    特里尼达和多巴哥: [-61.222503, 10.691803],
    突尼斯: [9.537499, 33.886917],
    土耳其: [35.243322, 38.963745],
    坦桑尼亚联合共和国: [34.888822, -6.369028],
    乌干达: [32.290275, 1.373333],
    乌克兰: [31.16558, 48.379433],
    乌拉圭: [-55.765835, -32.522779],
    美国: [-95.712891, 37.09024],
    乌兹别克斯坦: [64.585262, 41.377491],
    委内瑞拉: [-66.58973, 6.42375],
    越南: [108.277199, 14.058324],
    瓦努阿图: [166.959158, -15.376706],
    西岸: [35.3027226, 31.9465703],
    也门: [48.516388, 15.552727],
    南非: [22.937506, -30.559482],
    赞比亚: [27.849332, -13.133897],
    津巴布韦: [29.154857, -19.015438],
};

var data_tmp = [
    { name: '巴西', value: 67985.83 },
    { name: '中国', value: 87985.83 },
    { name: '墨西哥', value: 67985.83 },
    { name: '澳大利亚', value: 87985.83 },
    { name: '哈萨克斯坦', value: 67985.83 },
];
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};
option = {
    backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#05153a', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#062959', // 100% 处的颜色
            },
        ],
        globalCoord: false, // 缺省为 false
    },
    title: {
        text: '',
        subtext: '',
        left: 'center',
        top: '20px',
    },
    geo: {
        map: 'world',
        zoom: 1,
        show: true,
        roam: true,
        label: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false,
            },
        },
        itemStyle: {
            normal: {
                areaColor: '#21729a',
                borderColor: '#68ebf0', //线
                borderWidth: 0,
                borderJoin: 'round',
                shadowColor: 'rgba(18, 216, 250, 1)', //外发光
                shadowOffsetX: -3,
                shadowOffsetY: 5,
                shadowBlur: 2, //图形阴影的模糊大小
            },
            emphasis: {
                areaColor: '#2f9eff', //悬浮区背景
            },
        },
        select: {
            itemStyle: {
                areaColor: '#2f9eff', //悬浮区背景
            },
        },
    },
    series: [
        {
            type: 'map',
            geoIndex: 0,
        },
        // 柱状体的主干
        {
            type: 'lines',
            zlevel: 5,
            lineStyle: {
                width: 10, //尾迹线条宽度
                opacity: 0.9, //尾迹线条透明度'
                curveness: 0, //尾迹线条曲直度
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(166, 255, 203, 1)', // 0% 处的颜色
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(18, 216, 250, 1)', // 40% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(31, 162, 255, 1)', // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
                emphasis: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(248, 54, 0, 1)', // 0% 处的颜色
                            },

                            {
                                offset: 1,
                                color: 'rgba(250, 204, 34, 1)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
            selectedMode: true, //只有配置了这个选项才能有选中状态
            select: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(248, 54, 0, 1)', // 0% 处的颜色
                            },

                            {
                                offset: 1,
                                color: 'rgba(250, 204, 34, 1)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
                label: {
                    position: 'top',
                    show: true,
                    backgroundColor: {
                        image: tip,
                    },
                    width: 75,
                    height: 50,
                    lineHeight: 18,
                    padding: [20, 20],
                    formatter: function (params) {
                        var name = params.name;
                        var value = params.value;
                        var data = 34;
                        var text = `{fname|${name}}\n{img|${value}}\n{fdata|${data}}`;
                        return text;
                    },
                    rich: {
                        fname: {
                            color: '#E59B0A',
                            fontSize: 12,
                        },
                        fdata: {
                            color: '#FFE82A',
                            fontSize: 12,
                        },
                        img: {
                            color: '#0EB1FE',
                            fontSize: 14,
                            fontWeight: 600,

                            align: 'center',
                        },
                    },
                },
            },
            emphasis: {
                label: {
                    position: 'top',
                    show: true,
                    backgroundColor: {
                        image: tip,
                    },
                    width: 75,
                    height: 50,
                    lineHeight: 18,
                    padding: [20, 20, 20, 22],
                    formatter: function (params) {
                        var name = params.name;
                        var value = params.value;
                        var data = 34;
                        var text = `{fname|${name}}\n{img|${value}}\n{fdata|${data}}`;
                        return text;
                    },
                    rich: {
                        fname: {
                            color: '#E59B0A',
                            fontSize: 12,
                        },
                        fdata: {
                            color: '#FFE82A',
                            fontSize: 12,
                        },
                        img: {
                            color: '#0EB1FE',
                            fontSize: 14,
                            fontWeight: 600,
                            align: 'center',
                        },
                    },
                },
            },
            label: {
                position: 'top',
                normal: {
                    backgroundColor: {
                        image: tip,
                    },
                    padding: [20, 10],
                    width: 80,
                    show: true,
                    formatter: function (params) {
                        return ['{img|' + params.value + '}'];
                    },
                    rich: {
                        img: {
                            color: '#0EB1FE',
                            fontSize: 14,
                            fontWeight: 600,
                        },
                    },
                },
            },
            data: lineData(),
        },
        // 柱状体的顶部
        // {
        //   type: 'scatter',
        //   coordinateSystem: 'geo',
        //   geoIndex: 0,
        //   zlevel: 5,
        //   symbol: 'circle',
        //   symbolSize: [9, 5],
        //   itemStyle: {
        //     color: 'rgba(18, 216, 250, 1)',
        //     borderWidth: 1,
        //     borderColor: 'rgba(166, 255, 203, .8)',
        //     opacity: 1,
        //   },
        //   legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
        //   emphasis: {
        //     scale: false,
        //     itemStyle: {
        //       color: 'rgba(248, 54, 0, 1)',
        //       borderWidth: 0.5,
        //       borderColor: 'rgba(250, 204, 34, 1)',
        //     },
        //   },
        //   selectedMode: true,
        //   select: {
        //     scale: false,
        //     itemStyle: {
        //       color: 'rgba(248, 54, 0, 1)',
        //       borderWidth: 0.5,
        //       borderColor: 'rgba(250, 204, 34, 1)',
        //     },
        //   },
        //   // silent: true,
        //   data: scatterData(),
        // },
        // 柱状体的底部
        // {
        //     type: 'scatter',
        //     coordinateSystem: 'geo',
        //     geoIndex: 0,
        //     zlevel: 4,
        //     label: {
        //         // 这儿是处理的
        //         formatter: '{b}',
        //         position: 'bottom',
        //         color: '#fff',
        //         fontSize: 12,
        //         distance: 10,
        //         show: true,
        //     },
        //     symbol: 'circle',
        //     symbolSize: [10, 5],
        //     itemStyle: {
        //         // color: '#F7AF21',
        //         color: 'rgb(22,255,255, 1)',
        //         opacity: 1,
        //     },
        //     silent: true,
        //     data: scatterData2(),
        // },
        // 波浪
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            // geoIndex: 0,
            zlevel: 4,
            symbolSize: [10, 5],
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
                period: 10,
                scale: 7,
                number: 4,
            },
            itemStyle: {
                normal: {
                    color: '#00FFFF',
                },
            },

            data: convertData(data_tmp),
        },
    ],
};
// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
    const maxValue = Math.max(...data_tmp.map((item) => item.value));
    return 20 / maxValue;
}
// 柱状体的主干
function lineData() {
    return data_tmp.map((item) => {
        return {
            name: item.name,
            value: item.value,
            coords: [
                geoCoordMap[item.name],
                [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()],
            ],
        };
    });
}
// 柱状体的顶部
function scatterData() {
    return data_tmp.map((item) => {
        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()];
    });
}
// 柱状体的底部
function scatterData2() {
    return data_tmp.map((item) => {
        return {
            name: item.name,
            value: geoCoordMap[item.name],
        };
    });
}