echarts地图背景换为图片（不是真正的换，echarts地图不支持，地图背景直接更换为图片）

清疚 2022-04-24 06:22 3276阅读 0赞

**亲测，效果很好，大家可以用这种方法**  
echarts地图背景只支持纯色，并不支持背景直接更换为图片，可以间接背景换为图片，就是echarts div容器的外层再套一层div，两个div设置为同样大小，外层div背景设置图片（图片轮廓和地图轮廓需要差不多），然后调整echarts的地图大小和位置，来使两个图去重合就行，例如，我项目中实际用到的两个图，地图为广州的黄埔区，先看图把，后边贴样式代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]  
直接贴，前端代码了，会做好注释（以第一张图为例）

/* css样式 */
    html,body{
    		margin: 0px 0px;
    		width: 100%;
    		height: 100%;
    		font-family: PingFangSC-Regular;
    	}
    	/* 顶层div */
    	.view{
    		width: 92%;
    		height: 95%;
    		margin-left: 4%;
    	}
    /* 中间地图背景 */
    	.viewmap{
    		background: url('../image/jizhan/map3.png') center center no-repeat,		//背景图
    				rgba(0, 0, 0, 0);
    		background-size: 70% auto;			//大小大家自己根据需要调整
    	}

js代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 2]

$.get('../js/map/huangpu.json', function(chinaJson) {			//引入黄埔区json文件
    		echarts.registerMap('china', chinaJson); //引入china.json
    		var myChart = echarts.init(document.getElementById('mapview'));
    		var geoCoordMap = {
    		    '学校': [113.491666,23.344462],			//位置图形
    		    '黄旗山': [113.499221,23.188734],
    		    '公园': [113.476359,23.178389],
    		    '公园1': [113.498862,23.156973],
    		    
    		    '学校1': [113.540677,23.339352],			//基站图形
    		    '黄旗山1': [113.425695,23.22921],
    		    '公园1': [113.527598,23.279844],
    		    '公园11': [113.529036,23.098965],
    		};
    		
    		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;
    		};
    
    		option = {
    			geo : {
    				type: 'map',
                    map: 'china',
                    aspectScale: 0.82,			//echarts地图的长宽比（就是胖瘦）
                    center: [113.495619,23.224029],		//设置可见中心坐标，以此坐标来放大和缩小
                    zoom: 46,						//放大级别
    				roam : false, //是否可移动
    				hoverable : false, //是否有鼠标滑过效果
    				label : {
    					emphasis : {
    						show : false,
    					}
    				},
    				itemStyle : {
    					normal : {
    						areaColor : 'rgba(255, 255, 255, 0)', //区域颜色
    						borderColor : 'red',
    						borderWidth : 2,			//重合后，边框为0，即可隐去边框
    					},
    					emphasis : {
    						show : false,
    						areaColor : 'rgba(255, 255, 255, 0)' //滑过鼠标色
    					}
    				},
    				regions : [{ //不显示南海诸岛，的小地图
    					name : '南海诸岛',
    					value : 0,
    					itemStyle : {
    						normal : {
    							opacity : 0,
    							label : {
    								show : false
    							}
    						}
    					}
    				}]
    			},
    			series : [ 
    			    { 	// 基站塔图
    					type : 'effectScatter', //气泡效果scatter
    					rippleEffect : { //气泡效
    						brushType : 'stroke'
    					},
    					hoverAnimation: true,			//气泡效果end
    		            zlevel: 6,
    		            coordinateSystem: 'geo',
    		            symbol: 'image://../image/jizhan/position2.png',
    		            symbolSize: 40,
    		            label: {
    		                normal: {
    		                    show: false
    		                },
    		                emphasis: {
    		                    show: false
    		                }
    		            },
    		            rippleEffect: {
    		                brushType: 'stroke'
    		            },
    		            data: convertData([
       		                {name: "黄旗山1"},{name: "学校1"},{name: "公园1"},{name: "公园11"}
       		            ]),
    				}, 
    				{	// 左边图形位置图
                    	type: 'effectScatter',			//气泡效果scatter
    		            rippleEffect: {					//气泡效
    		                brushType: 'stroke'
    		            },
    		            hoverAnimation: true,			//气泡效果end
    		            zlevel: 5,
    		            coordinateSystem: 'geo',
    		            symbol: 'image://../image/jizhan/position1.png',
    		            symbolSize: 50,
    		            label: {
    		                normal: {
    		                    show: false
    		                },
    		                emphasis: {
    		                    show: false
    		                }
    		            },
    		            rippleEffect: {
    		                brushType: 'stroke'
    		            },
    		            data: convertData([
    		                {name: "黄旗山"},{name: "学校"},{name: "公园"},{name: "公园1"}
    		            ]),
    		        }
    			]
    		};
    		myChart.setOption(option);
    
    	});

**END，希望对大家有用，当时要实现这种效果的时候，也是一头雾水，大家换个思路想想就可以解决了！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190418100218512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]: /images/20220218/84b2d3e2204940f39ab77095dc3b4df5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 2]: /images/20220218/31cae3c69e9f4bf695f1fb8b1531e4b0.png