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官网实例上试一下