Echarts 地图隐藏右下角 地图块 的方法

文章转载自：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" 赋值，代码如下，可参考官网