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官網實例上試一下