上次添加的背景是给整张地图添加的,如果想要给省份名称设置背景图,我们就要在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)"],
}
},
最后我们看到的配置了对应条件的省份就会是下面这样的