echarts实现世界地图，解决series-map和geo同时使用导致在地图上缩放图层会重叠的问题

最新推荐文章于 2024-06-15 13:07:44 发布

唐小亭

最新推荐文章于 2024-06-15 13:07:44 发布

阅读量7.4k

点赞数 2

分类专栏： vue实用插件文章标签：前端

本文链接：https://blog.csdn.net/tt18473481961/article/details/109841549

版权

vue实用插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

续我上一篇：echarts实现世界地图，给不同数值的国家着色，并根据经纬度在对应位置上添加标签(一）

参考网址：

1.https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/

2.https://echarts.apache.org/zh/option.html#series-map.geoIndex

主要使用到的配置：

geoIndex

// 将坐标与值对应并反映在地图上
convertData(data) {
    var res = [];
    var that = this
    for (var i = 0; i < data.length; i++) {
        var geoCoord = that.geoCoordMap[data[i].name];
       // console.log('geoCoord',geoCoord)
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
},
// 获取近5年
getYearList() {
	var yearArr=[];
	var myDate = new Date();   
	nowYear = myDate.getFullYear();//当前年
	this.timeValue = nowYear
	for ( var int = nowYear-4; int <= nowYear; int++) {
		yearArr.push({
			label: int,
			value: int
		});
	}
	return yearArr.reverse();
},
/*获取数据*/
getData(){
	let that = this
	server.getTradeoverview({
		tradeflow: that.tradeflow,
		year: parseInt(that.timeValue),
		hscode: that.industryCode
	}).then(function(res){
		that.result=res.data
		var tempStr = that.tradeflow=='export'?'出口':'进口'
		that.pieces = [
			{min: res.data.section[3], label: '大于'+res.data.section[3],color:'#3267D7'},                     // 不指定 max，表示 max 为无限大（Infinity）。
	        {min: res.data.section[2], max: res.data.section[3], label: res.data.section[2]+'-'+res.data.section[3],color:'#1681F0'},
	        {min: res.data.section[1], max: res.data.section[2],label: res.data.section[1]+'-'+res.data.section[2],color:'#41ABFF'},
	        {min: res.data.section[0], max: res.data.section[1],label: res.data.section[0]+'-'+res.data.section[1],color:'#A3CBFF'},
	        {min: 0, max: res.data.section[0],label: '0-'+res.data.section[0],color:'#bdd2ec'},   
	        {value: 0, label: '无数据', color: '#EDEDED'}
		]
		that.tempData = that.dataDeal(res.data.map)
		that.getCountryList()
	})
},
/*转换数据格式给地图着色*/
dataDeal(list){
	var tempArr = []
	list.forEach(function(item,index){
		// console.log('11111-----',item)
		tempArr.push({
			name: item.countryCode,
            value: item.amountCurrent,
            other: item
		})
	})
	return tempArr
},
/*切换年份*/
changeOption(){
	this.getData()
},
/*生成地图*/
getCountryList() {
	var that = this;
	/* 根据请求的数据实例化地图 */
	var chart = echarts.init(document.getElementById('echartsMap'));
	chart.setOption({
		visualMap: { // 分区域着色
	        //min: 0,
	        //max: 2200000,
	        type: 'piecewise',
	        // splitNumber:5, //对于连续型数据，自动平均切分成几段。默认为5段
	        hoverLink:false,
	        itemWidth:12,    //图形的宽度，即长条的宽度。
	        itemHeight:12,   //图形的高度，即长条的高度。
	        showLabel: true, //是否显示每项的文本标签。默认情况是，如果text 被使用则不显示文本标签，否则显示。
	        pieces: that.pieces,
	        text:['单位:万元'], // 两端的文本，如['High', 'Low']
	        textStyle: { //文本样式
	            color: '#777F86'
	        },
	        bottom: 15 // 组件离容器下侧的距离
	    },
	    // 移到国家上的效果
	    tooltip: {
	    	trigger: 'item',
	        padding: 0,
	        enterable: true,
	        transitionDuration: 1,
	        textStyle: {
	            color: '#818A91',
	            decoration: 'none',
	        },
	        backgroundColor: 'rgba(255,255,255,0.96)',
	       // borderColor:'#000000',
	        //borderWidth: 1,
	        formatter: function(params) {
	        	//console.log('移到某个国家上:',params)
	            var tipHtml = '';
	            if (params.data&&params.data.other) {
		             tipHtml = '<div style="font-size:13px;min-width:300px;box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">'+
		            '<div style="font-size: 16px;color:#333333;">'+params.data.other.countryName+'</div>'+
		            '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年整体进口额为'+(params.data.other.amountCurrent||0)+'万元;</div>'+
		            '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年整体进口所占份额为'+(params.data.other.marketShare||0)+'%;</div>'+
		            '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年年进口额增长率为'+(params.data.other.growthRate||0)+'%;</div>'+
		            '</div>'
	            } else {
	            	tipHtml = '<div style="font-size:13px;min-width:300px;box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">'+
		            '<div style="font-size: 16px;color:#333333;">'+that.nameMap[params.name]+'</div>'+
		            '<div style="text-align:center;padding:20px 0 10px;">无数据</div>'+
		            '</div>'
	            }
	           
	            return tipHtml;
	        }
	    },
	   geo: {
	        	type: 'map',
	            name: '世界地图',
	            map: 'world',
	            roam: true, // 是否开启鼠标缩放和平移漫游
	            itemStyle: { // 每个区域的样式
					normal: {
						areaColor: '#EDEDED',
						borderColor: '#D3D7E1', // 图形的描边颜色
						borderWidth: 1 //描边线宽
					},
					emphasis: { // 高亮状态
						label: {
				            show: false // 去除鼠标移到地图上，地图上显示国家名的效果
				        }
						//areaColor: '#7d7d7d'
					}
				},
				scaleLimit: { // 缩放的极限控制
					min: 1,
					max: 3
				},
				left: 40, // 组件离容器左侧的距离
				top: 80, // 组件离容器上侧的距离
				right: 80,
				//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
				data: that.tempData
	    },
        series: [
	        {
	            type: 'map',
	            name: '世界地图',
	            map: 'world',
	            geoIndex: 0, // (bug fixed:解决在地图上缩放重影问题：https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/)
	            roam: true, // 是否开启鼠标缩放和平移漫游
	            itemStyle: { // 每个区域的样式
					normal: {
						areaColor: '#EDEDED',
						borderColor: '#D3D7E1', // 图形的描边颜色
						borderWidth: 1 //描边线宽
					},
					emphasis: { // 高亮状态
						label: {
				            show: false // 去除鼠标移到地图上，地图上显示国家名的效果
				        }
						//areaColor: '#7d7d7d'
					}
				},
				scaleLimit: { // 缩放的极限控制
					min: 1,
					max: 3
				},
				left: 40, // 组件离容器左侧的距离
				top: 80, // 组件离容器上侧的距离
				right: 80,
				//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
				data: that.tempData
	        },
	        // 打点
	        /*{
	            type: 'scatter',
	            coordinateSystem: 'geo',
	            data: this.convertData([
	                {name: "中国", value: 110},
	                {name: "以色列", value: 110},
	                {name: "法国", value: 110},
	                {name: "澳大利亚", value: 210},
	                {name: "日本", value: 210},
	                {name: "韩国", value: 210},
	                {name: "新加坡", value: 310}
	            ]),
	            zlevel:12,
	            symbolSize: [20,37], // 标记的大小,[宽、高]
	            //symbol: 'pin', //气泡
	            symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC1klEQVRIx+2WS0gVURjHf6OXvD4jM1+ZVhJmWNfwolmhqxaWRFQgLcwIWkVFG90EEUGhmyBKcpdUCGaPhenClZDgq8iyMqy8lo+0C5nPaz6+FndGx7mP5rqIFv3hwJnvO+d3zjffOd+MggnF1l8WM+MAgswONCtLIINHC68of32H/4H/INCrRCRYRE6LyCMR6RmeGZePk04Rkaeq3fxGRMQmIr3iXx9EZLcZWKEEpkJ/sJQAYZqS9BxFB+wEsrRn1+Ist4fv8tjZyNCvERLXxHE0poCzCaewBoXoGa2KouSuAIrIPuC5ZpxZdHHi3UU6J7o9IrFHZlCz4wahQVa9OUdRlHZYPjbFeu+trw/pGHMgCxEerWPMQeVAnXGdEq2jAXfqvU9G2rzCtFY33GoE7tI6WvmK13sHpuaQxSifCRycnjOaEozAFXUu0bIJx7TTJzA+dL3RFGwMeVDvPRK3x2/IxxP2GoHfjcBOvfdCaj72tWleYfa1aZzbmmcEtmsd7dhkA236Ea6FeW72dnLP0T3lnJ22xoSEuYo3Z4Sf32bHGuzx5chUFKVrhUVEXqzypjR4fdEikrlKYLTP7IlIbYCwS/iTiISIyLhJWB9mJCKHTQJtpoAqtO4PsHLTMBVoERGnD9hnf3NXXLmSsooQIBaILjqYn1OQl11lnFDb2Hyyobn9NfADGKkuL531AJaUVUQA23EXiaVFys4UHUtPTV4qTZ++DNVerXxwXx8M8A3oqS4vnQQILimriAVygSjcVzEJdznKann5Nio9NSU6KiLM2ts/OHrtTs0gsAWIARaBSSACSM7cf+BnV0vTlAWwsVwtDgEp+hCuV9W80j2Gqy1RndcP1KvzbUBTkLrSauXxI2oB3gB2dZVnwEY1rA3qa7CqvgXABYzjLld9LJe9BaDLmJR0IM6YeRM7HAHea0nxdmzigHVAJBCqRmEB5tWdTAMTvo7Nbwng09R+hsh2AAAAAElFTkSuQmCC',
	            symbolOffset:[0, '-50%'], // 标记相对于原本位置的偏移
	            label: {
	                normal: {
	                    show: true,
	                    offset: [18,-10], // 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
                        formatter: function(params) {
                        	console.log('气泡：',params)
                        	return '{fline|'+params.data.name+'}';
                        },
                        position: 'insideTopLeft', // 标签相对于图形包围盒左上角的位置。
                        distance:0,
                        backgroundColor: '#16B47F',
                        padding: [0, 0],
                        borderRadius: 3,
                        // verticalAlign:'middle',
                        // lineHeight: 32,
                        color: '#ffffff',
                        rich: {
                            fline: {
                                padding: [4, 6, 4, 6],
                                color: '#ffffff'
                            }
                        }
	                },
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                emphasis: {
	                    borderColor: '#fff',
	                    borderWidth: 1
	                }
	            }
	        }*/
        ]
	},true)
	// 地图点击事件
	chart.on('click', function(params) {
		console.log('---params----',params)
	})
}

唐小亭

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts实现世界地图，解决series-map和geo同时使用导致在地图上缩放图层会重叠的问题

续我上一篇：echarts实现世界地图，给不同数值的国家着色，并根据经纬度在对应位置上添加标签(一）参考网址：1.https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/2.https://echarts.apache.org/zh/option.html#series-map.geoIndex主要使用到的配置：geoIndex// 将坐标与值对应并反映在地图上convertData(data) { var res = []
复制链接

扫一扫