echart+map

reference:
https://github.com/apache/incubator-echarts/tree/master/extension/bmap baidumap的github嵌入文本

cdn：http://www.bootcdn.cn/echarts/

echart3.8.5 :http://echarts.baidu.com/download3.html

<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
	<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.min.js"></script>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		myChart.setOption({
			bmap: {
				center: [123.297282, 69.110789],
				zoom: 18,
				roam: true,
				mapStyle: {
					styleJson: [
					{
						"featureType": "water",
						"elementType": "all",
						"stylers": {
							"color": "#021019"
						}
					},
					{
						"featureType": "highway",
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "highway",
						"elementType": "geometry.stroke",
						"stylers": {
							"color": "#147a92"
						}
					},
					{
						"featureType": "arterial",
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "arterial",
						"elementType": "geometry.stroke",
						"stylers": {
							"color": "#0b3d51"
						}
					},
					{
						"featureType": "local",
						"elementType": "geometry",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "land",
						"elementType": "all",
						"stylers": {
							"color": "#08304b"
						}
					},
					{
						"featureType": "railway",
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "railway",
						"elementType": "geometry.stroke",
						"stylers": {
							"color": "#08304b"
						}
					},
					{
						"featureType": "subway",
						"elementType": "geometry",
						"stylers": {
							"lightness": -70
						}
					},
					{
						"featureType": "building",
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "all",
						"elementType": "labels.text.fill",
						"stylers": {
							"color": "#857f7f"
						}
					},
					{
						"featureType": "all",
						"elementType": "labels.text.stroke",
						"stylers": {
							"color": "#000000"
						}
					},
					{
						"featureType": "building",
						"elementType": "geometry",
						"stylers": {
							"color": "#022338"
						}
					},
					{
						"featureType": "green",
						"elementType": "geometry",
						"stylers": {
							"color": "#062032"
						}
					},
					{
						"featureType": "boundary",
						"elementType": "all",
						"stylers": {
							"color": "#1e1c1c"
						}
					},
					{
						"featureType": "manmade",
						"elementType": "geometry",
						"stylers": {
							"color": "#022338"
						}
					},
					{
						"featureType": "poi",
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					},
					{
						"featureType": "all",
						"elementType": "labels.icon",
						"stylers": {
							"visibility": "off"
						}
					},
					{
						"featureType": "all",
						"elementType": "labels.text.fill",
						"stylers": {
							"color": "#2da0c6",
							"visibility": "on"
						}
					}
					]
				}
			},
			series: [{
				type: 'scatter',
				coordinateSystem: 'bmap',
				data: [ [120, 30, 1] ]
			}]
		});
		var bmap = myChart.getModel().getComponent('bmap').getBMap();
		bmap.addControl(new BMap.MapTypeControl());
	</script>