echarts 中国地图加自定义图标

1. 导入js

 <script src="/ajax/libs/report/echarts/echarts-all.js"></script>

2. 插入div

<div class="ibox-content ">
			<div class="map" style="height: 680px;" id="echarts-map-chart"></div>
</div>

3.配置js

<script type="text/javascript">
	var data = [ //地图上展示的数据和内容
	    {
	        name: '北京',
	        value: 1,
	    }, {
			name : '河北',
			value : 2,
		}, {
			name : '天津',
			value : 1
		}, {
			name : '重庆',
			value : 2} 
	];
	var geoCoordMap = {	//定义自定义图标放置的位置

			'新疆': [86.61 , 40.79],
	         '西藏':[89.13 , 30.66],
	         '黑龙江':[128.34 , 47.05],
	         '吉林':[126.32 , 43.38],
	         '辽宁':[123.42 , 41.29],
	         '内蒙古':[112.17 , 42.81],
	         '北京':[116.60 , 40.40 ],
	         '宁夏':[106.27 , 36.76],
	         '山西':[111.95,37.65],
	         '河北':[115.21 , 38.44],
	         '天津':[117.64 , 39.52],
	         '青海':[97.07 , 35.62],
	         '甘肃':[103.82 , 36.05],
	         '山东':[118.01 , 36.37],
	         '陕西':[108.94 , 34.46],
	         '河南':[113.46 , 34.25],
	         '安徽':[117.28 , 31.86],
	         '江苏':[120.26 , 32.54],
	         '上海':[121.46 , 31.28],
	         '四川':[103.36 , 30.65],
	         '湖北':[112.29 , 30.98],
	         '浙江':[120.15 , 29.28],
	         '重庆':[107.51 , 29.63],
	         '湖南':[112.08 , 27.79],
	         '江西':[115.89 , 27.97],
	         '贵州':[106.91 , 26.67],
	         '福建':[118.31 , 26.07],
	         '云南':[101.71 , 24.84],
	         '台湾':[121.01 , 23.54],
	         '广西':[108.67 , 23.68],
	         '广东':[113.98 , 22.82],
	         '海南':[110.03 , 19.33],
	         '澳门':[113.54 , 22.19],
	         '香港':[114.17 , 22.32],
		};

	var convertData = function(data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var geoCoord = geoCoordMap[data[i].name];
	        if (geoCoord) {
	            res.push({
	                name: data[i].name,
	                value: geoCoord.concat(data[i].value),
	           
	            });
	        }
	    }
	    return res;
	};
	
		var mapChart = echarts.init(document
				.getElementById("echarts-map-chart"));
		var mapoption = {
			title : {
				show : true,// 是否显示
				//text : '工程分布',
				x : 'center',
				y : 'top',
			},
			tooltip : {
				trigger : 'item',
				   formatter: function(params) { //配置显示内容
			              if (typeof(params.value)[2] == "undefined")
			                return params.name + '项目数：' + "0";
			              else
			                return params.name + '项目数：' + params.value[2];
			            }
			        },
			 /* legend: {   配置不同数据展示的颜色和标题
	                orient: 'vertical',
	                show : true,// 是否显示
	                x:'930',
	                data:[
	                	{
	                		name:'在建',
	                		 textStyle:{
	                			fontSize:12,
	                			fontWeight:'bolder',
	                			color:'#cccccc'
	                		}, 
	                	},{
	                		name:'未建'
	                	}
	                	]
	            }, */
			 geo: {
					zlevel:0,		//geo显示级别，默认是0		 
			        map: 'china',
			        zoom: 1.5,
			        
			        symbol: 'image://img/flag.svg',
			        label: {
			            normal: {
			                show: false,
			            },
			            emphasis: {
			                show: false,
			                color: '#292929'
			            }
			        },
			        roam : true,
			        itemStyle : {
						normal : { // 默认状态下地图的文字
							label : {
								show : false,//默认是否显示省份名称  
								//color:"#07131C",
							},
							 areaColor: '#0A2664',
			                 borderColor: '#0A2664',//线
			                 shadowColor: '#0A2664',//外发光
			                 shadowBlur: 15,
						},
						emphasis : {// 鼠标放到地图上面显示文字
							label : {
								show : false
							//选中状态是否显示省份名称
							},
							areaColor: '#0a2dae',//悬浮区背景
						},
					},
			    },
			series : [ {
				name : '在建',
				type : 'map',
				mapType : 'china',
				zoom : 1.5,
				 
				coordinateSystem: 'geo', 
				geoIndex: 1,
				 roam : true,
				itemStyle : {
					normal : { // 默认状态下地图的文字
						label : {
							show : true,//默认是否显示省份名称  
							color:"#07131C",
						},
						 areaColor: '#3a7fd5',
		                 borderColor: '#0a53e9',//线
		                 shadowColor: '#092f8f',//外发光
		                 shadowBlur: 15,
					},
					emphasis : {// 鼠标放到地图上面显示文字
						label : {
							show : true
						//选中状态是否显示省份名称
						},
						areaColor: '#0a2dae',//悬浮区背景
					},
				},
				data : data
			},
            {
               
                type: 'scatter',
                roam : true,
                symbol: 'image:///img/flag.svg',
                symbolSize: 22,
                coordinateSystem: 'geo',
                data: convertData(data),
                label: {
                   /*  normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    }, */
                    emphasis: {
                        show: false
                    }
                },
            }
			]
		};
		//将配置加入地图中
		mapChart.setOption(mapoption, true);
		//捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
		mapChart.on('georoam',function(params){
		
		    var option = mapChart.getOption();//获得option对象
			if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时
				if(params.componentType=="geo"){
					option.series[0].zoom= option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
					option.series[0].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
				}else{
					option.geo[0].zoom=option.series[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
					option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
				}
				
			}else{//捕捉到拖曳时
			    option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
			}
			mapChart.setOption(option, true);//设置option
		});
		
		//点击地图触发
		mapChart.on('click', function(params) {
			itemList(params["name"]);
			$("#city").val(params["name"]);
			 $(".project-details").hide();//隐藏具体项目介绍
			 $(".itemList").show();//
			 $(".biaoti").show();//
			
		});