Echarts地图相关功能整合

        Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的，Echarts与Highcharts大致用法差不多，最近用到了Echarts的地图功能，把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js)

先来晒一个效果图吧

下面就来看一下代码如果实现

一、引用的css与js

 

<link rel="shortcut icon" href="asset/ico/favicon.png"> 
<link href="asset/css/font-awesome.min.css" rel="stylesheet">
<link href="asset/css/bootstrap.css" rel="stylesheet">
<link href="asset/css/carousel.css" rel="stylesheet"> 
<link href="asset/css/echartsHome.css" rel="stylesheet"> 
<link href="asset/css/codemirror.css" rel="stylesheet"> 
<link href="asset/css/monokai.css" rel="stylesheet"> 

<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/echartsHome.js" type="text/javascript"></script> 
<script src="asset/js/bootstrap.min.js"></script>
<script src="asset/js/codemirror.js"></script>
<script src="asset/js/javascript.js"></script> 
<script src="asset/js/echartsConfig.js"></script> 
<script src="www/js/echarts.js"></script> <script src="www/js/chart/geoCoord.js"></script>

二、html部分，用于地图展示和top5相关信息展示

 

 

		<div class="row-fluid" style="height:600px;position:relative;">
			<div id="mapContainer"  
							style="position: absolute; height: 100%; width: 90%; background-color: transparent; cursor: default;text-align:left">
					 无相关数据
			</div>
			<div id="pieChart" style="position:relative