文章转载自:https://blog.csdn.net/weixin_42512937/article/details/104342040 仅供学习参考
1、需求: Echarts 地图右下角 方框部分 在项目中有点多余,需要隐藏
2、查询 Echarts 官网配置项,发现修改属性 "geo.regions" 即可
3、没设置属性 "geo.regions" 之前,如下图
4、设置属性 "geo.regions" 之后,如下图
5、"geo.regions" 属性可以对特定的区域配置样式,此项目中,是将该地区透明度设置为 0 ,隐藏文字标签,主要内容如下
geo: [
{
// 地理坐标系组件
map: "china",
roam: false, // 可以缩放和平移
aspectScale: 0.8, // 比例
layoutCenter: ["50%", "38%"], // position位置
layoutSize: 370, // 地图大小,保证了不超过 370x370 的区域
label: {
// 图形上的文本标签
normal: {
show: true,
textStyle: {
color: "rgba(0, 0, 0, 0.9)",
fontSize: '8'
}
},
emphasis: { // 高亮时样式
color: "#333"
}
},
// 这里是重点!!!
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
itemStyle: {
// 图形上的地图区域
normal: {
borderColor: "rgba(0,0,0,0.2)",
areaColor: "#005dff"
},
emphasis: {
// 高亮时
areaColor: "#99CC33",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 10,
borderWidth: 0,
shadowColor: "rgba(0, 93, 255, 0.2)"
}
}
}
]
6、【注意】使用 "geo" 属性后,需要给属性 "series.geoIndex" 赋值,代码如下,可参考官网