ECharts世界地图示例-优快云博客

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height:800px;width:1000px;; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

var geoCoordMap = {
    '澳门分行':[113.5,22.2],
	'东京分行':[138.252924,36.204824],
	'胡志明市':[108.277199,14.058324],//越南
	'悉尼分行':[133.775136,-25.274398],//澳大利亚
	'新加坡分行':[103.51,1.16],
	'首尔分行':[127.766922,35.907757],//韩国
	'旧金山分行':[-122.25,37.48],//美国
	'纽约分行':[-74.0215,40.4251],//美国
	'法兰克福分行':[10.451526,51.165691],//德国
	'卢森堡分行':[6.129582999999999,49.815273],
	'布鲁斯班分行':[133.775136,-25.274398],//澳大利亚
	'伦敦分行':[-3.435973,55.378051],//英国
	'巴西BBM银行':[-51.92528,-14.235004],
	'台北分行':[121.5487,25.101],
	'香港分行':[115.15,22.15]  
};

var randomData= function(){
return Math.round(Math.random()*10);
}
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)
            });
        }
    }
	console.log(res);
    return res;
};

var option = {
tooltip:{trigger:'item',formatter:'{b}'},
visualMap:{type:'piecewise',show:false,min:0,max:10,inRange:{color:['red','blue','green','yellow','white']}},
geo: {
		map: 'world', 
		zoom:1.3,
		roam:true,
		itemStyle: {
		  normal: {
			areaColor: 'RGB(170,221,242)',
			borderColor: '#ffffff'
		  }
		},
		formatter:'{a}{b},{c}'
},
series: [
		{	
			type: 'scatter', // series图表类型
			coordinateSystem: 'geo', // series坐标系类型
			symbolSize:6,
			data: this.convertData([{name:'澳门分行',value:this.randomData()},
									{name:'东京分行',value:this.randomData()},
									{name:'胡志明市',value:this.randomData()},
									{name:'悉尼分行',value:this.randomData()},
									{name:'新加坡分行',value:this.randomData()},
									{name:'首尔分行',value:this.randomData()},
									{name:'旧金山分行',value:this.randomData()},
									{name:'纽约分行',value:this.randomData()},
									{name:'法兰克福分行',value:this.randomData()},
									{name:'卢森堡分行',value:this.randomData()},
									{name:'布鲁斯班分行',value:this.randomData()},
									{name:'伦敦分行',value:this.randomData()},
									{name:'巴西BBM银行',value:this.randomData()},
									{name:'台北分行',value:this.randomData()},
									{name:'香港分行',value:this.randomData()}
])
			
		}
	]
	
	
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>