ehcarts省份热力图实例

最新推荐文章于 2025-04-16 10:06:03 发布

gongchengshiv

最新推荐文章于 2025-04-16 10:06:03 发布

阅读量9k

点赞数 1

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/gongchengshiv/article/details/77775020

版权

echarts 专栏收录该内容

3 篇文章

订阅专栏

省份热力图如下：

最蛋疼的是城市的经纬度echarts官方竟然不提供，只能从网上搜索下载一个。附地址：http://download.youkuaiyun.com/download/gongchengshiv/9960692#

var geoCoordMap = {
    "郑州":[113.65,34.76]
};

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/henan.json', function (geoJson) {

echarts.registerMap('河南', geoJson);
        
});
option = {
    visualMap: {
        min: 0,
        max: 500,
        splitNumber: 5,
        inRange: {
            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: '河南'
    },
    series: [{
        name: '活跃人数分布',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: convertData([
            {name: "郑州", value: 813}])
    }]
};

效果图如下：