参考：http://blog.csdn.net/xieweikun7/article/details/52766676
1、首先，下载嘛
Echarts http://echarts.baidu.com/download.html
百度地图 http://lbsyun.baidu.com/ >>>> 功能与服务>>>>地图>>>>获取密钥>>>>按提示操作
2、引入插件
1 2 3
问号处是你获取的密钥
3、开始写js
设置地图高度为宽的9/16，高度不能没有，没有高度地图显示不出来，高是多少你随意
$('#statistics-map').height($('#statistics-map').width() * 8 / 16);
4、var geoCoordMap={‘北京市’: [116.395645, 39.929986],...}
设置坐标经纬度Echarts实例就是写死的，我的也是写死的，要活的也行，在百度地图开发平台下载一个
http://lbsyun.baidu.com/index.php?title=open/dev-res
这是我能找到最全的，不过数据和var geoCoordMap{}不太一样，后面写方法的时候可以自己调
5、var data={}
设置你的数据，当然了，写死也行，通过后台传值也行，但一定要有，毕竟没有数据就没有意义了
6、我的地图基本上是从Echart实例拷贝过来的，做了一点修改，符合自己的项目要求，其中的注释其实大多是英文的中文翻译，英语好的挑不懂的看
1 var option = { 2 title: { //标题 3 text: '', 4 subtext: '', //副标题 5 sublink: '', //副标题链接 6 left: 'center' //标题位置，居中 7 }, 8 tooltip: { //工具提示 9 trigger: 'item' // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 10 }, 11 bmap: { //百度地图的设置 12 center: [106.23248, 37.48644], //中心点 13 zoom: 5, //缩放 14 roam: true, //漫游 15 mapStyle: { //地图样式 16 styleJson: [{ 17 "featureType": "water", //水 18 "elementType": "all", //feature是特征，element是元素 19 "stylers": { 20 "color": "#044161" 21 } 22 }, 23 { 24 "featureType": "land", //陆地 25 "elementType": "all", 26 "stylers": { 27 "color": "#004981" 28 } 29 }, 30 { 31 "featureType": "boundary", //边界 32 "elementType": "geometry", 33 "stylers": { 34 "color": "#064f85" 35 } 36 }, 37 { 38 "featureType": "railway", //铁路 39 "elementType": "all", 40 "stylers": { 41 "visibility": "off" 42 } 43 }, 44 { 45 "featureType": "highway", //高速及国道 46 "elementType": "geometry", //几何（图形） 47 "stylers": { 48 "color": "#004981" 49 } 50 }, 51 { 52 "featureType": "highway", 53 "elementType": "geometry.fill", //几何填充 54 "stylers": { 55 "color": "#005b96", 56 "lightness": 1 57 } 58 }, 59 { 60 "featureType": "highway", 61 "elementType": "labels", //标签 62 "stylers": { 63 "visibility": "off" 64 } 65 }, 66 { 67 "featureType": "arterial", //城市主路 68 "elementType": "geometry", 69 "stylers": { 70 "color": "#004981" 71 } 72 }, 73 { 74 "featureType": "arterial", 75 "elementType": "geometry.fill", 76 "stylers": { 77 "color": "#00508b" 78 } 79 }, 80 { 81 "featureType": "poi", //定位 82 "elementType": "all", 83 "stylers": { 84 "visibility": "off" 85 } 86 }, 87 { 88 "featureType": "green", //绿地 89 "elementType": "all", 90 "stylers": { 91 "color": "#056197", 92 "visibility": "off" 93 } 94 }, 95 { 96 "featureType": "subway", //地铁 97 "elementType": "all", 98 "stylers": { 99 "visibility": "off"100 }101 },102 {103 "featureType": "manmade",//人造区域104 "elementType": "all",105 "stylers": {106 "visibility": "off"107 }108 },109 {110 "featureType": "local",//普通道路111 "elementType": "all",112 "stylers": {113 "visibility": "off"114 }115 },116 {117 "featureType": "arterial",118 "elementType": "labels",119 "stylers": {120 "visibility": "off"121 }122 },123 {124 "featureType": "boundary",125 "elementType": "geometry.fill",126 "stylers": {127 "color": "#029fd4"128 }129 },130 {131 "featureType": "building", //建筑物132 "elementType": "all",133 "stylers": {134 "color": "#1a5787"135 }136 },137 {138 "featureType": "label",//标签139 "elementType": "all",140 "stylers": {141 "visibility": "off"142 }143 }144 ]145 }146 },147 series: [{ //展示数据的分类系列148 name: '校友分布', //名称149 type: 'scatter', //类型150 coordinateSystem: 'bmap', //坐标系，使用上面定义的bmap151 data: {}, //数据，这里设置空，等请求后台传过来数据之后再赋上152 symbolSize: function(val) { //数据显示的符号的大小153 return val[2]; //直径？半径？长度154 },155 label: { //标签156 normal: {157 formatter: '{b}', //格式化158 position: 'right', 标签显示位置159 show: false //是否显示160 },161 emphasis: { //强调162 show: false163 }164 },165 itemStyle: { //样式166 normal: {167 color: '#FFD700'168 }169 }170 },171 {172 name: 'Top 5', //分类系列的第二类173 type: 'effectScatter',174 coordinateSystem: 'bmap',175 data: {},176 symbolSize: function(val) {177 return val[2] / 10;178 },179 showEffectOn: 'emphasis',180 rippleEffect: { //连锁反应181 brushType: 'stroke'182 },183 hoverAnimation: true, //hover操作184 label: {185 normal: {186 formatter: '{b}',187 position: 'right',188 show: true189 }190 },191 itemStyle: {192 normal: {193 color: '#f4e925',194 shadowBlur: 10,195 shadowColor: '#333'196 }197 },198 zlevel: 1 //层级199 }200 ]201 }; 7、修改滑动操作后的显示格式，具体想显示什么样的格式，大家根据返回的数据来写，具体问题具体分析
1 //官方实例tooltip 2 tooltip: { 3 trigger: 'item' 4 }, 5 6 7 //我改后的 8 tooltip: { 9 trigger: 'item',10 //在这里添加一个函数来返回改变原来的格式11 formatter: function(data) {12 return data.name + "：" + data.value[2];13 }14 }, 8、没有效果图，自己可以在Echarts官网实例上试一下