Echarts地图之——如何给省份名称添加背景图片背景色

上次添加的背景是给整张地图添加的，如果想要给省份名称设置背景图，我们就要在label配置里面去添加设置。

series: [
{
        type: 'map',
        map: 'china',
        aspectScale: 0.85,
        zoom: 1.2,
        top: '9%',
        left: '11%',
        roam: false,
        selectedMode: 'multiple',
        label: {
            show: true,
            color: '#FFF',
            fontSize: 25,
            formatter:  function (value) {
                //不显示南海渚岛文字
                if (value.name == '南海诸岛') {
                    return ' '
                }
                //*****************默认省份名称样式
                return '{a|' + value.name + '}'
            },
            rich: {
                //**********************设置的默认样式
                a: {
                    color: '#FFF',
                    fontSize: 25,
                    fontStyle: 'italic',
                    align: 'center',
                    // width: 90,
                    height: 40,//************宽高根据背景图片来定
                    padding: [10, 15, 10, 15],
                    backgroundColor: {
                        image: 'data:image/png;base64,*****这里放默认的背景图的base64******'
                    },
                },
                //********************特殊显示的样式
                b: {
                    color: '#2e5685',
                    fontSize: 30,
                    fontWeight: 'bold',
                    fontStyle: 'italic',
                    align: 'center',
                    width: 140,
                    height: 70,
                    padding: [0, 10, 0, 10],
                    backgroundColor: {
                        image: 'data:image/png;base64,*****这里放默认的背景图的base64********'
                    },
                }
            }
        },
        itemStyle: {
        	//还是上次的配置，背景透明
            borderColor: '#4f83b3',
            borderWidth: 2,
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'transparent' // 0% 处的颜色
                    // color: '#fff' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                    // color: '#fff' // 100% 处的颜色
                }],
                global: true, // 缺省为 false
                // image: ''
            },
        },
        emphasis: {
            //悬浮高亮的配置
        },
        select: {
            //选中的配置
        },
        zlevel: 2,
        data: []
    },
]

这样就默认给了所有的省份设置了rich为a的样式，要设置的背景图就放到backgroundColor的image里面就行。

如果我们需要根据后端返回数据给对应的省份设置rich为b的样式，则只需要对label的formatter重新设置即可。

let proArr = [];
this.data.forEach(item => {
	//根据需求的条件给proarr添加省份的名称，可自行添加判断条件
    proArr.push(item.PROVINCE_NAME)
    baseOption.series[1].data.push({
        name: item.PROVINCE_NAME,
        value: item.数据,
    })
})
//baseOption是给option设置的变量名称
baseOption.series[1].label.formatter = function (value) {
    //隐藏南海渚岛文字
    if (value.name == '南海诸岛') {
        return ' '
    }
    //如果是proarr所包含的省份，设置rich为b的样式
    if (proArr.includes(value.name)) {
        return '{b|' + value.name + '}'
    }
    //其他默认仍然是a
    return '{a|' + value.name + '}'
}
this.cncharts.clear()
this.cncharts.setOption(baseOption);

同样，如果要根据省份的数据来给省份添加背景色，则通过visualMap来设置

visualMap: {
    show: false,//是否显示visualmap的图例
    type: "piecewise",
    pieces: [//根据数据条件来设置
        {gte: 20, label: '大于等于20'},
        {gt: 0, lt: 20, label: '0 到 20'},
        {lte: 0, label: '小于等于0'},
    ],
    inRange: {//很遗憾，这里只能设置统一颜色的rgba，不能像series里面一样设置从某一方向到另一方向的渐变
        color: ["rgba(1, 255, 230, .5)", "rgba(95, 250, 110, .5)", "rgba(36, 105, 195, .5)"],
    }
},

最后我们看到的配置了对应条件的省份就会是下面这样的