北京地图echarts 地图配置项内容和展示

两地图叠加,带热力效果

配置项如下
      var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/110000_full.json";

var seriesdata = [{
        type: 'map',
        map: 'bottomMap',
        aspectScale: 0.75, //长宽比
        left: 'center',
        // right: '35%',
        top: 30,
        width: '60%',
        height: '80%',
        roam: false,
        itemStyle: {
            normal: {
                areaColor: 'rgba(27,28,86,1)',
                borderColor: 'rgba(104,107,194,0.5)',
                borderWidth: 2,
                label: {
                    show: false,
                    color: '#fff',
                }
            }
        },
        silent: true,
    },
    {
        type: 'map',
        map: 'topMap',
        aspectScale: 0.75, //长宽比
        left: 'center',
        // right: '35%',
        top: 10,
        width: '60%',
        height: '80%',
        roam: false,
        itemStyle: {
            normal: {
                areaColor: 'rgba(57,85,245,0.3)',
                borderColor: 'rgba(98,110,255,1)',
                borderWidth: 2,
                label: {
                    show: true,
                    color: '#fff',
                }
            }
        },
        emphasis: {
            label: {
                show: true,
                color: '#fff',
            },
            itemStyle: {
                areaColor: 'rgba(107,155,245,0.3)',
                borderColor: 'rgba(98,110,255,1)',
            }
        },
        markPoint: {
            symbol: function(value, param){
                console.info('value',value);
                console.info('param',param)
            },
            symbolSize: 10,
            data: [{
                name: '丰台区',
                coord: [116.286968,39.863642],
                value: 10
            }],
            itemStyle:{
                color: '#fff'
            }
        },
        data: [{
            name: '怀柔区',
            value: 10
        }]
    }
];


//GDP
var optionMap = {
    backgroundColor: "#0D1B46",
    grid: {
        // left:'2%',
        right: '10%',
        bottom: '3%',
        width: '20%',
        height: '50%'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(data) {
            //console.log(data);
            if (!isNaN(data.value)) {
                return data.name + ":" + data.value;
            }
        },
    },

    series: seriesdata

};

$.get(uploadedDataURL, function(gdMap) {
    echarts.registerMap('topMap', gdMap);
    echarts.registerMap('bottomMap', gdMap);
    myChart.setOption(optionMap, true);
});
    
截图如下