最近使用echarts使用地图时碰到了一个问题,查了很久终于解决了,直接上图上代码
一级地图效果
地图下钻后的错误效果
地图下钻后的想要效果
代码
return {
grid: {
left: '2%',
right: '0%',
top: '0%',
bottom: '0%',
width: '95%',
containLabel: true
},
layoutCenter: ['50%', '50%'], // 位置
layoutSize: '80%',
visualMap: {
min: 0,
max: 1000,
type: 'piecewise',
show: false,
itemWidth: 10,
itemHeight: 80,
showLabel: true,
seriesIndex: [0],
text: ['高', '低'],
// inRange: {
// color: ['#7F1000', '#BD1317', '#E64C45', '#FF8C71', '#FDD29F']
// },
visibility: 'off',
pieces: [
{
max: 200,
color: '#FDD29F'
},
{
min: 200,
max: 400,
color: '#FF8C71'
},
{
min: 400,
max: 600,
color: '#E64C45'
},
{
min: 600,
max: 800,
color: '#BD1317'
},
{
min: 800,
color: '#7F1000'
}
],
textStyle: {
color: '#7b93a7'
},
bottom: 30,
left: 'left'
},
geo: {
map: 'shangyu',
aspectScale: 1, // 长宽比
zoom: 1.2,
seriesIndex: 1,
roam: false, // 是否可缩放
label: {
normal: {
color: '#fff',
show: true
},
emphasis: {
show: true,
color: '#fff',
fontSize: 18,
position: ['50%', '50%']
}
},
itemStyle: {
normal: {
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 5,
borderWidth: 0
},
emphasis: {
areaColor: '#f2d5ad'
}
},
globalCoord: false // 缺省为 false
},
series: [
{
type: 'map',
// map: 'shangyu',
geoIndex: 0,
roam: false,
selectedMode: false, // 添加这个属性完美解决问题
data: this.dataList
},
{
type: 'effectScatter', // 带有涟漪特效动画的散点图
coordinateSystem: 'geo',
data: this.mapData,
symbol: function (value, params) {
return params.data.img
},
// symbol: 'pin',
symbolSize: [12, 12],
label: {
normal: {
show: false
}
},
itemStyle: {
show: true,
normal: {
color: '#7F1000'
}
},
showEffectOn: 'render', // 加载完毕显示特效
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1,
showAllSymbol: true
}
],
animation: true
}
解决方法:
在 series->map 里添加 selectedMode: false
附:地图不要求下钻时,移入或点击某块区域要高亮显示
不需要加selectedMode属性,在series->map 里添加
emphasis: { // 移入选中的样式
itemStyle:{
areaColor: '#4f7fff',
borderColor: 'rgba(0,242,252,.6)',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#00f2fc',
},
},
select: { // 点击选中的样式
itemStyle:{
borderColor: "rgba(0,242,252,.6)",
borderWidth: 2,
areaColor: "#55ecbc",
shadowBlur: 10,
shadowColor: '#1a8d9e',
shadowOffsetY: 0,
shadowOffsetX: 0,
},
}