渐变加阴影中国地图,可随意缩放大小echarts 配置项内容和展示

做的项目需要用到好看立体的中国地图,那阴影必不可少,网上作品普遍都是叠加双geo实现,但拖动或放大时会导致双地图分离,而且即使使用了echarts自带的缩放事件实时做地图位置同步也会很难看。

配置项如下
      var chinaMapJson = [];

$.getJSON('https://gallerybox.echartsjs.com/dep/echarts/map/json/world.json', function (worldJson) {
    //从世界地图找到中国地图
    for(var item in worldJson.features){
        if(worldJson.features[item].properties.name == "China"){
            chinaMapJson = worldJson.features[item];
            
            break;
        }
        
    }
    
    //下载完整中国地图
    if(chinaMapJson.length !== 0){
        $.getJSON('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (chinaJson) {
            //将世界地图中的中国地图拼到完整中国地图中
            chinaJson.features.unshift(chinaMapJson);
            
            echarts.registerMap('china',chinaJson);
            
            loadEcharts();
        });
    }
});

function loadEcharts(){
    myChart.setOption({
        backgroundColor: {
            type: 'linear-gradient',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: '#0000ff'
            }, {
                offset: 1,
                color: '#0055ff'
            }],
            global: true
        },
        tooltip: {
            show: false
        },
        geo: {
            map: 'china',
            roam: true,
            zoom:1.2,
            label:{
                normal:{
                    show:false
                },
                emphasis:{
                    show:false
                }
            },
            regions: [{
                name: 'China',
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'rgba(0,0,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0, 200, 255, 1)' // 100% 处的颜色
                            }]
                        },
                        shadowColor: 'rgba(0, 0, 0, 1)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    },
                    emphasis: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'rgba(0,0,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0, 200, 255, 1)' // 100% 处的颜色
                            }]
                        },
                    }
                }
            }],
            itemStyle: {
                normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 0.5,
                    areaColor: 'rgba(0,0,0,0)'
                },
                emphasis: {
                    areaColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 2,
                }
            }
        }
    });
}


    
截图如下