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

约定不等于承诺〃 2022-12-15 11:18 362阅读 0赞

文章转载自：[https://blog.csdn.net/weixin\_42512937/article/details/104342040][https_blog.csdn.net_weixin_42512937_article_details_104342040] 仅供学习参考

**1、需求： Echarts 地图右下角 方框部分 在项目中有点多余，需要隐藏**

**2、查询 Echarts [官网配置项][Link 1]，发现修改属性 "geo.regions" 即可**

**3、没设置属性 "geo.regions" 之前，如下图**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70][]

**4、设置属性 "geo.regions" 之后，如下图**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70 1][]

**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" 赋值，代码如下，可参考[官网][Link 2]**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70 2][]

[https_blog.csdn.net_weixin_42512937_article_details_104342040]: https://blog.csdn.net/weixin_42512937/article/details/104342040
[Link 1]: https://www.echartsjs.com/zh/option.html#geo.regions
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70]: /images/20221123/c4f2dc2e86004a4fb0e9cffdd559cd6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70 1]: /images/20221123/de51a3c83bc14e598c70392adadda08a.png
[Link 2]: https://www.echartsjs.com/zh/option.html#series-map.geoIndex
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxMjkzNw_size_16_color_FFFFFF_t_70 2]: /images/20221123/7ad6b568acf74df99ad9805148255210.png