Echart--百度地图（散点图）

参考：http://blog.csdn.net/xieweikun7/article/details/52766676

1、首先，下载嘛

　　Echarts　　http://echarts.baidu.com/download.html

　　百度地图　　http://lbsyun.baidu.com/　　>>>>　　功能与服务>>>>地图>>>>获取密钥>>>>按提示操作

2、引入插件

 <script type="text/javascript" src="echarts.min.js"></script>
 <script type="text/javascript" src="bmap.js"></script>　
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=？"></script>      

　　问号处是你获取的密钥

 

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实例拷贝过来的，做了一点修改，符合自己的项目要求，其中的注释其实大多是英文的中文翻译，英语好的挑不懂的看

 var option = {
     title: {　　//标题
         text: '',　　
         subtext: '',　　//副标题
         sublink: '',　　//副标题链接
         left: 'center'　　//标题位置，居中
     },
     tooltip: {　　//工具提示
         trigger: 'item'     // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
     },
     bmap: {　　//百度地图的设置
         center: [106.23248, 37.48644],　　//中心点
         zoom: 5,　　　　　　　　　//缩放　　　　　　　
         roam: true,　　　　　　//漫游
         mapStyle: {　　//地图样式
             styleJson: [{
                     "featureType": "water",　　//水
                     "elementType": "all",　　　　//feature是特征，element是元素
                     "stylers": {
                         "color": "#044161"
                     }
                 },
                 {
                     "featureType": "land",　　//陆地
                     "elementType": "all",
                     "stylers": {
                         "color": "#004981"
                     }
                 },
                 {
                     "featureType": "boundary",　　//边界
                     "elementType": "geometry",
                     "stylers": {
                         "color": "#064f85"
                     }
                 },
                 {
                     "featureType": "railway",　　//铁路
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "highway",　　//高速及国道
                     "elementType": "geometry",　　//几何（图形）
                     "stylers": {
                         "color": "#004981"
                     }
                 },
                 {
                     "featureType": "highway",　　
                     "elementType": "geometry.fill",　　//几何填充
                     "stylers": {
                         "color": "#005b96",
                         "lightness": 1
                     }
                 },
                 {
                     "featureType": "highway",
                     "elementType": "labels",　　　　//标签
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "arterial",　　//城市主路
                     "elementType": "geometry",
                     "stylers": {
                         "color": "#004981"
                     }
                 },
                 {
                     "featureType": "arterial",
                     "elementType": "geometry.fill",
                     "stylers": {
                         "color": "#00508b"
                     }
                 },
                 {
                     "featureType": "poi",　　//定位
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "green",　　//绿地
                     "elementType": "all",
                     "stylers": {
                         "color": "#056197",
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "subway",　　//地铁
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "manmade",//人造区域
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "local",//普通道路
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "arterial",
                     "elementType": "labels",
                     "stylers": {
                         "visibility": "off"
                     }
                 },
                 {
                     "featureType": "boundary",
                     "elementType": "geometry.fill",
                     "stylers": {
                         "color": "#029fd4"
                     }
                 },
                 {
                     "featureType": "building",　　//建筑物
                     "elementType": "all",
                     "stylers": {
                         "color": "#1a5787"
                     }
                 },
                 {
                     "featureType": "label",//标签
                     "elementType": "all",
                     "stylers": {
                         "visibility": "off"
                     }
                 }
             ]
         }
     },
     series: [{　　//展示数据的分类系列
             name: '校友分布',　　//名称
             type: 'scatter',　　//类型
             coordinateSystem: 'bmap',　　//坐标系，使用上面定义的bmap
             data: {},　　//数据，这里设置空，等请求后台传过来数据之后再赋上
             symbolSize: function(val) {　　//数据显示的符号的大小
                 return val[2];　　//直径？半径？长度
             },
             label: {　　//标签
                 normal: {
                     formatter: '{b}',　　//格式化
                     position: 'right',　　标签显示位置
                     show: false　　　　//是否显示
                 },
                 emphasis: {　　//强调
                     show: false
                 }
             },
             itemStyle: {　　//样式
                 normal: {
                     color: '#FFD700'
                 }
             }
         },
         {
             name: 'Top 5',　　//分类系列的第二类
             type: 'effectScatter',
             coordinateSystem: 'bmap',
             data: {},
             symbolSize: function(val) {
                 return val[2] / 10;
             },
             showEffectOn: 'emphasis',
             rippleEffect: {　　//连锁反应
                 brushType: 'stroke'
             },
             hoverAnimation: true,　　//hover操作
             label: {
                 normal: {
                     formatter: '{b}',
                     position: 'right',
                     show: true
                 }
             },
             itemStyle: {
                 normal: {
                     color: '#f4e925',
                     shadowBlur: 10,
                     shadowColor: '#333'
                 }
             },
             zlevel: 1　　//层级
         }
     ]
 };

7、修改滑动操作后的显示格式，具体想显示什么样的格式，大家根据返回的数据来写，具体问题具体分析

     //官方实例tooltip
     tooltip: {
         trigger: 'item'
     },  

     //我改后的
     tooltip: {
         trigger: 'item',
         //在这里添加一个函数来返回改变原来的格式
         formatter: function(data) {
             return data.name + "：" + data.value[2];
         }
     },

8、没有效果图，自己可以在Echarts官网实例上试一下