eCharts省份地图配置及方法_echarts 广东地图-优快云博客

本文链接：https://blog.youkuaiyun.com/Michaelcsd/article/details/79216878

本文介绍如何使用eCharts配置广东省级地图，并展示热力图数据。通过注册地图JSON文件和自定义转换数据函数实现地理位置坐标映射。适用于前端开发者学习地理数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eCharts省份地图配置及方法

文章目录：

广东地图使用方法

广东地图使用方法

var geoCoordMap = {  
    "广州":[113.30,23.20]  
};  

var convertData = function (data) {  
    var res = [];  
    for (var i = 0; i < data.length; i++) {  
        var geoCoord = geoCoordMap[data[i].name];  
        if (geoCoord) {  
            res.push(geoCoord.concat(data[i].value));  
        }  
    }  
    return res;  
};  

$.get('vendors/echarts/map/json/province/guangdong.json', function (geoJson) {  
    console.log(geoJson)

echarts.registerMap('广东', geoJson);  

});  
option = {  
    visualMap: {  
        min: 0,  
        max: 500,  
        splitNumber: 5,  
        inRange: {  
            color: ['#d94e5d','#eac736','#50a3ba'].reverse()  
        },  
        textStyle: {  
            color: '#000'  
        }  
    },  
    geo: {  
        zoom:1,                  // 地图大小
        // top: '0px',
        // bottom:'0%',
        // left:'0%',
        // right:'0%',          // 当上下左右都设置未0的话，地图会缩放成容器大小
        map: '广东',
        label: {
            emphasis: {
                show: true
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#293a78',        // 默认市级背景颜色
                borderColor: '#d0d9ff',
                borderWidth: 1.5
            },
            emphasis: {
                areaColor: '#151f40'
            }
        }
    },  
    series: [{  
        name: '活跃人数分布',  
        type: 'heatmap',  
        coordinateSystem: 'geo',  
        data: convertData([  
            {name: "广州", value: 2000}
        ]),
        itemStyle: {
            normal: {
                color: '#fff'
            },
            emphasis: {
                color: '#fff'
            }
        }
    }]  
};