最近在开发数据可是胡大屏地图,发现明明设置了地图选中后的颜色为浅白色,但是鼠标移开后,又变为了黄色,这不是我想要的效果。经过研究发现地图设置有两种,一种是鼠标移入后的颜色,一种是选中后的颜色,分别由两个字段控制。
选中后的颜色有select控制
selectedMode: "single", //选择模式,单选,只能选中一个地市
select: {//这个就是鼠标点击后,地图想要展示的配置
disabled: false,//可以被选中
itemStyle: {//相关配置项很多,可以参考echarts官网
areaColor: "#77e8e4"//选中
},
label: {
show: true,
color: '#fff',
emphasis: {
color: 'white',
show: true
}
},
},
鼠标移入后的颜色由emphasis控制
emphasis: {
areaColor: '#abcdda',
borderWidth: 0,
color: '#fff'
},
实例
series: [
{
type: 'lines',
z: 10000,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0.1, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
},
tooltip: {
trigger: 'item',
},
label: {
show: false,
color: '#fff',
emphasis: {
color: 'white',
show: true
}
},
lineStyle: {
normal: {
color: '#11a3ff', // 将飞线颜色更改为红色
type: 'dashed',
width: 0.5, //尾迹线条宽度
opacity: 0.5, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: fData,
},
{
type: 'map',
mapType: 'china',
geoIndex: -1,
zoom: 1.1, //默认显示级别
label: {
show: true,
color: '#aad0ff',
emphasis: {
color: 'white',
show: true
}
},
itemStyle: {
normal: {
areaColor: '#09415f',
shadowColor: '#09415f',
borderColor: '#2de7f9',
borderWidth: 1
},
emphasis: {
areaColor: '#abcdda',
borderWidth: 0,
color: '#fff'
},
},
selectedMode: "single", //选择模式,单选,只能选中一个地市
select: {//这个就是鼠标点击后,地图想要展示的配置
disabled: false,//可以被选中
itemStyle: {//相关配置项很多,可以参考echarts官网
areaColor: "#77e8e4"//选中
},
label: {
show: true,
color: '#fff',
emphasis: {
color: 'white',
show: true
}
},
},
data: mapdata
},
]