echarts map地圖設置外邊框或者陰影

換個思路實現起來也很簡單，好比設計圖是這個樣子：

你以爲邊框很差實現，可是你會不會實現下面兩種樣子

細邊框:

粗邊框:

若是你說你都會，那麼問題就解決了，若是想實現陰影就把底層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: []
              }
              ]
複製代碼

本篇如能對您有所幫助，實在是感到榮幸。若有不合理之處也請你們多多指點