eCharts省份地图配置及方法

最新推荐文章于 2024-09-10 15:13:15 发布

小前端Michael

最新推荐文章于 2024-09-10 15:13:15 发布

阅读量7k

点赞数

分类专栏： eCharts图表配置文章标签：省份地图

本文链接：https://blog.csdn.net/Michaelcsd/article/details/79216878

版权

eCharts图表配置专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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'
            }
        }
    }]  
};