echarts map地图设置外边框或者阴影

最近要实现一个地图的效果,地图外有个外边框,配置项无此配置,在网上看到的效果,还需要积分下载,顿时感觉很不好,互联网之所以发展到如此,个人感觉是因为 "分享" 。找不到就自己实现咯。

换个思路实现起来也很简单，比如设计图是这个样子：

你觉得边框不好实现，但是你会不会实现下面两种样子

如果你说你都会，那么问题就解决了，两个重叠一下就是你想要的效果(center，aspectScale和zoom需要一样)，附上关键代码：

geo: {
              map: 'china',
              center: [112.194115019531, 23.582111640625],
              zoom: 12,
              aspectScale: 1, //长宽比
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    color: '#ccc'
                    }
                  },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#ccc'
                  }
                }
                },
              roam: false,
              itemStyle: {
                normal: {
                  borderColor: "#fff",
                  borderWidth: 5,
                  areaColor: '#272235',
                  fontWeightL: 700,
                /*  shadowBlur:20,
                  shadowColor: '#fff',*/

                },
                emphasis: {
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#3f15d6' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#d243cd' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            },


            series: [
              {
                type: 'map',
                map: 'china',
                center: [112.194115019531, 23.582111640625],
                zoom: 12,
                geoIndex: 1,
                aspectScale: 1, //长宽比
                showLegendSymbol: false, // 存在legend时显示

                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 16,
                      color: '#ccc'
                    }
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#ccc'
                    }
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: '#272235',
                    borderColor: '#fff',
                    fontWeightL: 700,
                    borderWidth: 1
                  },
                  emphasis: {
                    areaColor: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: '#3f15d6' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#d243cd' // 100% 处的颜色
                      }],
                      globalCoord: false // 缺省为 false
                    }
                  }
                },
                data: []
              }
              ]

如果想实现阴影就把底层map的边框改成阴影

本篇如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点