Echart helpers

lines_in_worldgeo.js

var geoCoordMap = {
                    'SUNNYVALE': [-122.0144, 37.386],
                    'BENGALURU': [77.580643, 12.972442],
                    'US': [-97.822, 37.751],
                    'SARATOGA': [-122.0230, 37.2638],
                    'CHENNAI':[80.2707, 13.0827],
                    'MUMBAI':[72.8777, 19.0760]
                };
                var PopData = [
                    [{name:'US'}, {name:'US',value:95}],
                    [{name:'MUMBAI'}, {name:'MUMBAI',value:95}],
                ];
                var BJData = [
                    [{name:'SUNNYVALE'}, {name:'US',value:95}],
                    [{name:'BENGALURU'}, {name:'MUMBAI',value:95}],
                ];
                
                var Eight8Data = [
                    [{name:'SARATOGA'}, {name:'US',value:95}],
                    [{name:'CHENNAI'}, {name:'MUMBAI',value:95}],
					[{name:'CHENNAI'}, {name:'US',value:95}],
                ];
				var positionval = 'left';
				var popcolor = '#17a2b8';
                

                var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem[0].name];
                        var toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };

                var color = ['#a6c84c', '#ffa022', '#46bee9'];
                var series = [];
                [['BLUEJEANS', BJData], ['8x8', Eight8Data]].forEach(function (item, i) {
                    series.push({
                        name: item[0],
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 1,
                            trailLength: 0.9,
                            color: '#fff',
                            symbol: 'line',
                            symbolSize: 3
                        },
                        lineStyle: {
                            normal: {
                                color: color[i],
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        name: item[0],
                        type: 'lines',
                        zlevel: 2,
                        symbol: ['none', 'arrow'],
                        symbolSize: 10,
                        effect: {
                            show: true,
                            period: 1,
                            trailLength: 0,
                            symbol: planePath,
                            symbolSize: 15
                        },
                        lineStyle: {
                            normal: {
                                color: color[i],
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        name: item[0],
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] / 8;
                        },
                        itemStyle: {
                            normal: {
                                color: color[i]
                            }
                        },
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                            };
                        })
                    });
                });
				PopData.forEach(function (item, i) {
					positionval = 'left'
					if(item[0].name == 'SUNNYVALE'){
						positionval = 'top';
					} else if(item[0].name == 'SARATOGA'){
						positionval = 'bottom';
					} else if(item[0].name == 'CHENNAI'){
						positionval = 'right';
					} 
                    series.push({
                        name: item[0].name,
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] / 8;
                        },
                        itemStyle: {
                            normal: {
                                color: popcolor
                            }
                        },
                        data: [{name:item[0].name, value:geoCoordMap[item[0].name].concat(95)}]
                    });
				});
				BJData.concat(Eight8Data).forEach(function (item, i) {
					positionval = 'left'
					if(item[0].name == 'SUNNYVALE'){
						positionval = 'top';
					} else if(item[0].name == 'SARATOGA'){
						positionval = 'bottom';
					} else if(item[0].name == 'CHENNAI'){
						positionval = 'right';
					} 
                    series.push({
                        name: item[0].name,
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: positionval,
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] / 8;
                        },
                        itemStyle: {
                            normal: {
                                color: 'white'
                            }
                        },
                        data: [{name:item[0].name, value:geoCoordMap[item[0].name].concat(95)}]
                    });
				});
				
				

                var option = {
                    backgroundColor: '#404a59',
                    title : {
                        text: 'Cloudbrink',
                        subtext: 'Device-PoP Traffic',
                        left: 'center',
                        textStyle : {
                            color: '#fff'
                        }
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                        graphic: [{
                        type: 'group',
                        left: 'center',
                        bottom: 30,
                        width: 100,
                        bounding: 'raw',
                        children: [{
                            type: 'circle',
                            style: {fill: '#26B99A', text: 'Total:'},
                            left: 0
                        }, {
                            type: 'text',
                            style: {fill: 'yellow', text: 'PoP'},
                            left: 35
                        }, {
                            type: 'text',
                            style: {fill: '#26B99A', text: 'Used:'},
                            left: 85
                        }, {
                            type: 'text',
                            style: {fill: 'yellow', text: 'Devices'},
                            left: 120
                        }]
                    }],
                    legend: {
                        orient: 'vertical',
                        top: 'bottom',
                        left: 'right',
                        data: [{
                            name: 'US',
                            label: "pop",
                            icon: 'circle',
                            textStyle: {
                                color: 'red'
                            }
                        }, "CHENNAI"],
                        textStyle: {
                            color: '#fff'
                        },
                        selectedMode: 'single'
                    },
                    geo: {
                        map: 'world',
                        zoom: 2,
                        center: [0.0126, 35.7917],
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#404a59'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: series
                };

worldgeo.js

option = {
    backgroundColor: '#333',

    geo: {
        map: 'world',
        left: 0,
        right: 0,
        top: 0,
        zoom: 1.6,
        silent: true,
        roam: true,
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: {
        type: 'custom',
        coordinateSystem: 'geo'
    }
}