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

主要使用到的配置：

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)
    })
}