1、跟echarts-gl搭配使用

确认好版本 echarts5.0版本跟echarts-gl2.0版本配合使用，会有init()初始化问题，我用的事echarts4.8.0 +echarts-gl1.2.0，原生js或vue又可以使用
ps:根据自己项目需求下载不同版本即可
echarts-gl文档地址

1、选择GL配置中需要的3d type，根据对应的3d效果配置参数

image

2、配置option 图的内容跟数据

            option = {
                backgroundColor: '#333',
                tooltip : {//hover后显示的数据配置
                    trigger: 'item',
                    show: true,
                    formatter: function(data){
                        console.log(data);
                        let name =`<div>${data.value[data.value.length-1]}</div>`;
                        return name;
                    }
                },
                geo: [{//第一层地图默认颜色占比大小配置
                    map: 'js',
                    aspectScale: 0.9,
                    roam: false, //是否允许缩放
                    //zoom: 1.1, //默认显示级别
                    layoutSize: '95%',
                    layoutCenter: ['50%', '50%'],
                    itemStyle: {
                        areaColor: 'transparent',
                        borderColor: '#37C1FD',
                        borderWidth: 2,
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: '#0160AD'
                        },
                        label: {
                            show: 0,
                            color: '#fff'
                        }
                    },
                    zlevel: 3,
                }, 
                {//底部第二层地图占比大小配置
                    map: 'js2',
                    aspectScale: 0.9,
                    roam: false, //是否允许缩放
                    //zoom: 1.1, //默认显示级别
                    layoutSize: '95%',
                    layoutCenter: ['50%', '52%'],
                    itemStyle: {
                        areaColor: '#005DDC',
                        borderColor: '#329BF5',
                        borderWidth: 1,
                    },
                    zlevel: 1,
                    silent: true,
                },
            ],
                series: [{
                    type: 'lines',//圆柱体
                    zlevel: 5,
                    effect: {
                        show: false,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 5, //图标大小
                    },
                    lineStyle: {
                        width: 12, //尾迹线条宽度
                        color:{
                            type: 'dotted',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        // opacity: 1, //尾迹线条透明度

                        // curveness: 0 //尾迹线条曲直度

                    },
                    label: {
                        show: 0,
                        position: 'end',
                        formatter: '245'
                    },
                    silent: true,
                    data: lineData
                }, 
                {
                    type: 'scatter',//圆柱体顶部
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    zlevel: 5,
                    label: {
                        show: !0
                        position: 'right',
                        formatter: params => data[params.dataIndex].value,
                        padding: [4, 8],
                        backgroundColor: '#003F5E',
                        borderRadius: 5,
                        borderColor: '#67F0EF',
                        borderWidth: 1,
                        color: '#67F0EF'
                    },
                    symbol: 'circle',
                    symbolSize: [12, 8],
                    itemStyle: {
                        color: 'blue',
                        opacity: 0.8
                    },
                    silent: true,
                    data: scatterData
                }, 
                {//标注点文字，光标配置
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    symbol: 'circle',
                    symbolSize: 4,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'fill',
                        scale: 10
                    },
                    hoverAnimation: true,
                    label: {//文字颜色
                        formatter: p => p.data[2],
                        position: 'right',
                        color: '#fff',
                        fontSize: 14,
                        distance: 10,
                        show: !0,
                    },
                    itemStyle: {//光标颜色
                        color: '#FEF134',
                    },
                    zlevel: 6,
                    data: scatterData3
                }
            ]
            };
           myChart.setOption(option);