echarts geo地图加投影两种方法

方法1，geo中加多个地图图形，叠加。缩放时 可能会不一致，需要捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳

 geo: [
          {
            zlevel: 3,//geo显示级别，默认是0 【最顶层图形】
            map: 'BJ',//地图名
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,

            label: {
              show: true,
              fontSize: 12,
              color: "#000000"
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1.5,
              // emphasis:
            },
            emphasis: {
              label: {
                fontSize: 12,
                color: '#fff',
                fontWeight: 'bold'
              },
              itemStyle: {
                areaColor: "#008A8A",
                shadowColor: "rgba(0,10,10,0.53)",
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: "none",
                label: {
                  show: true,
                },
                borderWidth: 3,
                borderColor: '#fff'
              }
            },
            select: {
              label: {
                fontSize: 12,
                color: '#fff',
                fontWeight: 'bold'
              },
              itemStyle: {
                areaColor: "#008A8A",
                shadowColor: "rgba(0,10,10,0.53)",
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: "none",
                label: {
                  show: true,
                },
                borderWidth: 3,
                borderColor: '#fff'
              }
            },

            selectedMode: 'single',
          },
          {
            zlevel: 2,//geo显示级别，默认是0 【第二层图形】
            map: "BJ",
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,
            label:{
              show:false
            },
            itemStyle: {
              //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
              borderColor: '#fff',
              borderWidth: 4,
              shadowColor: '#008A8A',
              shadowOffsetY: 6,
              shadowOffsetX: 3,
            },
            emphasis: {
              disabled: true
            }
          },
          {
            zlevel: 1,//geo显示级别，默认是0 【最底层层图形】
            map: "BJ",
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,
            label:{
              show:false
            },
            itemStyle: {//底层地图样式
              //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
              borderColor: '#fff',
              borderWidth: 4,
              shadowColor: '#AAD8D9',
              shadowOffsetY: 10,
              shadowOffsetX: 6,
            },
            emphasis: {
              disabled: true
            }
          }
        ],
        series: [
          {
            name: "xxx量",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]

 //捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
      this.myChart.on('georoam', function (params) {
        var option = _this.myChart.getOption();//获得option对象
        if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变


          option.geo[2].zoom = option.geo[0].zoom;
          option.geo[2].center = option.geo[0].center;

        } else {//捕捉到拖曳时
          option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
          option.geo[2].center = option.geo[0].center;
        }
        _this.myChart.setOption(option);//设置option
      });

方法2，直接加阴影。这样会在最上层显示出阴影的分界线，效果不好

geo: {
          map: "BJ",
          roam: true,
          scaleLimit: {
            min: 1,
            max: 4
          },
          zoom: 1.2,
          label: {
            show: true,
            fontSize: "11",
            color: "#000000"
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: '#008A8A',
            shadowOffsetY: 8,
            shadowOffsetX: 6,
            emphasis: {
              areaColor: "#008A8A",
              shadowColor: "rgba(0,10,10,0.53)",
              shadowBlur: 10,
              shadowOffsetY: 8,
              shadowOffsetX: 6,
              focus: "none",
              label: {
                show: true,
              },
              borderWidth: 3,
              borderColor: '#fff'
            }
          },
          emphasis: {
            label: {
              fontSize: 12,
              color: '#fff',
              fontWeight: 'bold'
            },
          },
          selectedMode: 'single',
        },



series: [
          {
            name: "xxx量",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]