使用Echarts的散点图与百度地图结合显示

        最近做的东西需要将数据进行可视化的展示，选用的是Echarts的散点图和百度地图结合起来，将平台上的设备用散点图的形式呈现在百度地图上，因为第一次搞，结合看了下Echarts的官网的案例，成功显示了。

    这里查了下官网的要求，需要引入echarts.min.js、bmap.min.js和百度地图的api（这个需要自己去申请开发者账号，具体操作可以百度），具体引入如下所示：

（ak自己申请可得）

    引入上述js文件后，可以设计一个div用于放置地图，我是如下设置：

    然后在js中进行图表的初始化和设置：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('map_yangan'));
//echarts图表设置配置
var option = {
	//标题设置
    	title: {},
    	tooltip : {
            trigger: 'item'
    	},
    	//百度地图配置
    	bmap: {
    	    //中心坐标，如下定义为北京
            center: [104.114129, 37.550339],
            //地图初始显示的缩放大小
            zoom: 6,
            roam: true,
            //地图上的一些特征属性设置
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#021625'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#000000'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#404a59'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#404a59'
                    }
                }]
            }
    	},
    	//散点数据的配置
    	series : [
        {
            name: '设备分布',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{name : ***, value : ***}]
            data: res,
            symbolSize: 10,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#f4e925',
                    color: '#f4e925'
                }
            }
        }
        
    	]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

    然后显示效果如图所示：