echarts作广东省地图数据可视化的例子

下面是echats作地图数据可视化的一些简单的例子，需要更多的功能，可以自己在配置中添加。

1、根据人数分布的密度图

下面直接放demo:

<html>
<head>
    <link rel='icon' href='w.ico' type='image/x-icon'>
    <title>广东地图</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="echarts.min.js"></script>
    <script src="guangdong.js"></script>
    <script src="jquery-1.10.2.min.js"></script>

</head>
<body>
    <div id="map-wrap" style="height: 500px;">
</body>
<script>
    //地理坐标图
    var geoCoordMap = {
    '珠海市': [113.353986,21.924979]
    ,'广州市':[113.480637,23.125178]
    ,'湛江市':[110.264977,21.274898]
    ,'茂名市':[110.919229,21.659751]
    ,'阳江市':[111.825107,21.859222]
    ,'云浮市':[112.044439,22.629801]
    ,'肇庆市':[112.472529,23.051546]
    ,'江门市':[112.894942,22.090431]
    ,'中山市':[113.382391,22.321113]
    ,'佛山市':[113.022717,22.828762]
    ,'清远市':[113.051227,23.685022]
    ,'韶关市':[113.591544,24.501322]
    ,'河源市':[114.897802,23.746266]
    ,'梅州市':[116.117582,24.099112]
    ,'潮州市':[116.692301,23.661701]
    ,'揭阳市':[116.255733,23.143778]
    ,'汕头市':[116.708463,22.87102]
    ,'汕尾市':[115.364238,22.774485]
    ,'深圳市':[114.085947,22.347]
    ,'东莞市':[113.746262,22.746237]
    ,'惠州市':[114.412599,23.079404]
    };

    var mydata = [
    {name: '珠海市',value:250973},
    {name: '广州市',value: 453088},
    {name: '中山市',value:424302},
    {name: '佛山市',value: 1135329},
    {name: '揭阳市',value:30035},
    {name: '梅州市',value: 47148},
    {name: '汕头市',value:65920},
    {name: '东莞市',value: 428881},
    {name: '惠州市',value:300025},
    {name: '汕尾市',value: 20154},
    {name: '江门市',value: 231140},
    {name: '清远市',value: 136351},
    {name: '肇庆市',value: 126912},
    {name: '河源市',value: 37704},
    {name: '韶关市',value: 44550},
    {name: '云浮市',value: 31672},
    {name: '潮州市',value: 26802},
    {name: '阳江市',value: 3114},
    {name: '茂名市',value: 39238},
    {name: '湛江市',value: 48422},
    ];

// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));

// mapChart的配置
var option = {
    title:{
        text:'广东省各地市开机用户数分布图',
        x:'center',
    },
    tooltip:{
        trigger:'item'
    },
    series: [{
        name: '点播量', // series名称
        type: 'map', // series图表类型
        map: '广东',
        coordinateSystem: 'geo', // series坐标系类型
        data:mydata // series数据内容
    }],
    visualMap: {  
        min: 3000,  
        max: 1150000,  
        left: 'left',  
        top: 'bottom',  
        text: ['高','低'],           // 文本，默认为数值文本 
        realtime: false,
        calculable: true,
        inRange:{
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    }
};
mapChart.setOption(option);
</script>
</html>

效果图：

image.png

2、在地图上作散点图

<!DOCTYPE html>
<html>
<head>
    <link rel='icon' href='w.ico' type='image/x-icon'>
    <title>广东地图</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="echarts.min.js"></script>
    <script src="guangdong.js"></script>
    <script src="jquery-1.10.2.min.js"></script>

</head>

<body>
    <div id="map-wrap" style="height: 800px;">
</body>

<script>
    //地理坐标图
    var geoCoordMap = {
    '珠海市': [113.353986,21.924979]
    ,'广州市':[113.480637,23.125178]
    ,'湛江市':[110.264977,21.274898]
    ,'茂名市':[110.919229,21.659751]
    ,'阳江市':[111.825107,21.859222]
    ,'云浮市':[112.044439,22.629801]
    ,'肇庆市':[112.472529,23.051546]
    ,'江门市':[112.894942,22.090431]
    ,'中山市':[113.382391,22.321113]
    ,'佛山市':[113.022717,22.828762]
    ,'清远市':[113.051227,23.685022]
    ,'韶关市':[113.591544,24.501322]
    ,'河源市':[114.897802,23.746266]
    ,'梅州市':[116.117582,24.099112]
    ,'潮州市':[116.692301,23.661701]
    ,'揭阳市':[116.255733,23.143778]
    ,'汕头市':[116.708463,22.87102]
    ,'汕尾市':[115.364238,22.774485]
    ,'深圳市':[114.085947,22.347]
    ,'东莞市':[113.746262,22.746237]
    ,'惠州市':[114.412599,23.079404]
    };
    var mydata = [
    {name: '珠海市',value:250973},
    {name: '广州市',value: 453088},
    {name: '中山市',value:424302},
    {name: '佛山市',value: 1135329},
    {name: '揭阳市',value:30035},
    {name: '梅州市',value: 47148},
    {name: '汕头市',value:65920},
    {name: '东莞市',value: 428881},
    {name: '惠州市',value:300025},
    {name: '汕尾市',value: 20154},
    {name: '江门市',value: 231140}
    //{name: '清远市',value: 136351},
    //{name: '肇庆市',value: 126912},
    //{name: '河源市',value: 37704},
    //{name: '韶关市',value: 44550},
    //{name: '云浮市',value: 31672},
    //{name: '潮州市',value: 26802},
    //{name: '阳江市',value: 3114},
    //{name: '茂名市',value: 39238},
    //{name: '湛江市',value: 48422},
    ];
//处理series数据    
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));


// mapChart的配置
var option = {
    title:{
        text:'广东省各地市开机用户数分布图',
        x:'center',
    },
    tooltip:{
        trigger:'item'
    },
    geo: {
        show:true,
        map: '广东',
        type:'map',
        roam:true, //是否开启鼠标缩放和平移漫游
        itemStyle:{ // 定义样式
             normal: {
                areaColor: '#cdcdcd',
                borderColor: '#111'
            },
        },
        emphasis: {  // 高亮状态下的样式
            areaColor: '#2a333d'
        }
        label:{
            normal: { 
                show: true,  //显示省份名称
            }
        }
    },
    backgroundColor: #0f375f',          // 图表背景色
    series: [{
        name: '点播量', // series名称
        type: 'scatter', // series图表类型,.这里为散点
        coordinateSystem: 'geo', // series坐标系类型
        data:convertData(mydata) // series数据内容
    }],
};
mapChart.setOption(option);
</script>
</html>

image.png

在这里series的数据格式为：
{name:'广州',value:[113.480637,23.125178,453088]}
所以要对数据进行一定的处理。