EChart 3 与百度地图结合并异步加载数据

<div id="echarts_chinaMap" style="width: 100%; height: 700px">

1.如上代码，在html页面要有一个div标签来放置chart.

2.接下来编写script脚本：

var myChart = echarts.init(document.getElementById(‘echart_chinaMap’));
    
    var bmap = {
			center : [ 104, 35.76 ],
			roam : true,
			mapStyle: {
		        styleJson: [{
		            "featureType": "water",
		            "elementType": "all",
		            "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"
		            }
		        }]
		    }
		};
    
    var series = [{
		type : 'map',
		zlevel: 1,
		coordinateSystem : 'bmap'
    }];
    
    var option = {
		bmap : bmap,
		series : series
	};
    
    myChart.setOption(option);
    this.chart = myChart;
    this.bmap = bmap;

这段代码的功能就是先创建好地图，接下来就是调数据往地图上画一些series.

var _this = this;
	var res= [];
	var series = [];
	var _url = options.url;
	function setOption(data){
		series= [{
			name: 'Supplier',
            type: 'scatter',
            coordinateSystem: 'bmap',
            zlevel: 1,
	        data: data,
	        symbol: 'pin',
            symbolSize: 18,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
           	 normal:{
           		 color: '#2ec7c9'
           	 },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            }
		}];
		var option = {
			bmap : _this.bmap,
			series : _this.chart.getOption().series.concat(series)
		};
		if(option.show){
			_this.chart.setOption(option);
		}
	}
	function getMapData(){
		$.ajax({
			url: _url,
			success: function(_data){
				for(var i = 0 ; i < _data.features.length;i++){
					var geos=_data.features[i].geometry.geometries;
					for(var j =0; j < geos.length;j++){
						var _obj = geos[j].object;
						var _value = [_obj.address.longitude,_obj.address.latitude,100];
						res.push({name: _obj.address.address,
							value: _value});
					}
				}
				setOption(res);
			}
		});	
	}
	getMapData();

这样就实现异步动态加载数据了。

转载于:https://my.oschina.net/ayyao/blog/871637