use echarts to show world pop distribution

echarts-world.js

//http://gallery.echartsjs.com/editor.html?c=scatter-world-population
//http://tuya.100bt.com/show/533806.html###

var data = [
     {name: '上海', value: 10, color: 'orange'},
     {name: '北京', value: 14, color: 'orange'},
     {name: '广州', value: 7, color: 'orange'},
     {name: '佛山', value: 1},
     {name: '杭州', value: 1},
     {name: '深圳', value: 4, color: 'orange'},
     {name: '福州', value: 1},
     {name: '合肥', value: 1},
     {name: '马鞍山', value: 1},
     {name: '长沙', value: 1},
     {name: '香港', value: 4, color: 'orange'},
     {name: '圣何塞', value: 1},
     {name: '台北', value: 1},
     {name: '越南', value: 1}
];
var geoCoordMap = {
    '广州':[113.23,23.16],
    '佛山':[113.11,23.05],
    '杭州':[120.19,30.26],
    '福州':[119.3,26.08],
    '合肥':[117.27,31.86],
    '马鞍山':[118.48,31.56],
    '长沙':[113,28.21],
    '圣何塞':[-121,38],
    '台北':[121.55,25.06],
    '越南':[106, 16],
        '上海':[121.48,31.22],
    '北京':[116.46,39.92],
        '香港':[114.19,22.29],
    '深圳':[114.07,22.62]

};

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*20),
                itemStyle: {
                        normal: {
                            color: data[i].color || '#a7a737'
                        }
                    }
            });
        }
    }
    return res;
};

option = {
    backgroundColor: '#000102',
    title : {
        text: '网络资源 | 全球POP点：48个',
        subtext: '已建POP城市：上海、北京、广州、深圳、香港、佛山、杭州、福州、合肥、马鞍山、长沙、San Jose、台北、越南',
        left: 'center',
        top: '30px',
        textStyle: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 24
        },
        subtextStyle:{
            fontSize:18,
        }
    },
    visualMap: {
        show: false,
        min: 0,
        max: 1000,
        inRange: {
            symbolSize: [6, 60]
        }
    },
    geo: {
        name: 'World Population (2010)',
        type: 'map',
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                color: '#00c1de',
                borderColor: '#ccc',
                borderWidth: 1,
                opacity: 0.3
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            })),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#a7a737',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};