echarts自定义map背景，以及自定义标注效果

实现思路

1. 设置DIV的背景图，为自定义彩图；
2. 绘制echarts地图，默认情况下区域颜色透明，没有边框；
3. 通过设置aspectScale(宽高比)、center(中心坐标)、zoom(缩放大小)来控制echarts和彩图的重叠效果；
4. 设置鼠标浮动到的区域效果，渐变色、背景等等。

实现代码

js代码

const json = require('@/assets/data/guizhou.json')
echarts.registerMap('贵州省', json)
this.centerMapChart = echarts.init(document.getElementById('center-map'))
this.centerMapChart.setOption({
    geo: {
        type: 'map',
        map: '贵州省',
        aspectScale: 1.5,
        center: [106.602177096, 27.0449067414],
        zoom: 1,
        roam: false,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                }
            }
        },
        itemStyle: {
            normal: {
                borderWidth: 0,
                areaColor: 'rgba(0, 0, 0, 0)'
            },
            emphasis: {
                borderColor: '#34C6D3',
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 5, 
                areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#2C8CC1' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#57B5C2' // 100% 处的颜色
                    }],
                }
            }
        }
    },
    series: {
        type: 'map',
        geoIndex: 0,
        markPoint: {
            silent: false,
            animation: 'BMAP_ANIMATION_BOUNCE',
            symbolSize: [50, 60],
            symbol: 'image://' + require('@/assets/imgs/info-no.png'),
            label: {
                show: true,
                position: 'bottom',
                distance: 3,
                color: '#fff',
                fontSize: 12,
                formatter: '{b}',
            },
            data: this.mapData.map(item => {
                const opt = {
                    name: item.orgName,
                    coord: item.position,
                    orgCode: item.orgCode
                }
                if (item.orgCode === this.loanEnterpriseInfo.orgCode) {
                    opt.symbol = 'image://' + require('@/assets/imgs/info-al.png')
                }
                return opt
            })
        }
    }
})

HTML代码

<div class="main-center-map" id="center-map"></div>

CSS代码

.main-center-map{
    width: 78.5rem;
    height: 48.8rem;
    background-image:url('~@/assets/imgs/map.png');
    background-size:cover;
    position: absolute;
    left: 1rem;
    bottom: 0rem;
}