1、静态时显示

normal:{   //静态的时候显示的默认样式

  show:true, //默认是否显示

  textStyle:{
    color:'red'

  }

},

2、鼠标移入时显示

emphasis:{  //鼠标移入动态的时候显示的默认样式

  color:'green'

}

3、完整option代码

const sactterMapOpt = {
title: {
text: "全国主要城市访问数据",
x: "center",
textStyle: {
color: "#43d0d6"
}
},
legend: {
data: ['下载','浏览','搜索'], //与series的name属性对应
top:60,
align: 'left',
textStyle: {
color: "#fff"
}
},
geo: {
map: "china",
roam: false, //开启鼠标缩放和漫游
zoom: 1, //地图缩放级别
selectedMode: false, //选中模式:single | multiple
left: 0,
right: 0,
top: 0,
bottom: 0,
layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
layoutSize: "100%",
label: {
normal: { //静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial"
}
},
emphasis: { //动态展示的样式
color:'#43d0d6',
},
},
itemStyle: {
normal: {
areaColor: "#101f32",
borderWidth: 1.1,
textStyle: {
color: "#fff"
},
borderColor: "#43d0d6" //地图边框颜色
},
emphasis: {
color: "#fff",
areaColor: "#069"
}
}
},
series: [
{
name:'下载',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//涟漪特效
period: 1, //特效动画时长
scale: 4, //波纹的最大缩放比例
brushType: "stroke" //波纹的绘制方式:stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "red" //颜色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res2
},
{
name:'浏览',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//涟漪特效
period: 1, //特效动画时长
scale: 4, //波纹的最大缩放比例
brushType: "stroke" //波纹的绘制方式:stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "yellow" //颜色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res2
},
{
name:'搜索',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//涟漪特效
period: 1, //特效动画时长
scale: 4, //波纹的最大缩放比例
brushType: "stroke" //波纹的绘制方式:stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#fff" //颜色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res3
}
]
};