效果图：
主要代码：
option.geo.itemStyle: {
normal: {
areaColor: '#0e1c47',
borderWidth: 1,//设置外层边框
borderColor:'#1e9ce7',
//shadowColor: '#fff',
shadowColor: '#ccc',
shadowBlur: 15,
opacity:0.8
}
}
完整代码：
const sactterMapOpt = {
title: {
text: '',
x: 'center',
textStyle: {
color: '#fff'
}
},
legend: {
data: ['warning'], //与series的name属性对应
orient: 'vertical',
y: 'bottom',
x: 'right',
textStyle: {
color: '#fff'
}
},
/* tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0.3)',
padding:[10, 20],
textStyle:{
color:'#fff',
fontSize:18,
lineHeight:'30px'
},
position: function (point, params, dom, rect, size) {
return [point[0]+10, point[1]-dom.offsetHeight -10];
},
formatter: function(params) {
var res = '<center>栏目<center>'
res+=params.name + ' : ' + params.value[2] + ' 台';
return res;
}
}, */
visualMap: {
min: 0,
max: 200,
calculable: false,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
geo: {
show: true,
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#0e1c47',
borderWidth: 1,//设置外层边框
borderColor:'#1e9ce7',
//shadowColor: '#fff',
shadowColor: '#ccc',
shadowBlur: 15,
opacity:0.8
}
}
},
series: [{
name: 'PM2.5',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
areaColor: '#0e1c47',
borderColor: '#1e9ce7',
borderWidth: 1
}
},
data: convertScatterData(scatterVal)
},
{
type: 'map',
map: 'china',
geoIndex: 1,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#0e1c47',
borderColor: '#1e9ce7',
borderWidth: 1,
//shadowColor: '#ccc',
//shadowBlur: 15
},
emphasis: {
areaColor: '#01215c'
}
},
}
]
};
版权声明：本文为qq_27751965原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。