echars 3D map solution for custom colors of regions

let echartsMap = this.$echarts.init(this.$refs.echartsMap);

this.$echarts.registerMap('河南', dataGeoLocation);
//The dataGeoLocation at the back is the map json file we downloaded and then introduced into the current //component for use, and the Henan at the front is the map we want to register

 this.echartsDataMap = {
              visualMap:
                min: 0,
                max: 500,
                show: false,
                inRange: {
                  color: ['#eac736', '#6EAFE3'].reverse()
                },

              },
              globeRadius: 100,
              globeOuterRadius: 100,
              geo3D:
                map: mapName,
                viewControl: {
                  center: [0, 0, 0],
                  alpha: 100, //Up and down rotation anglebeta: 10, //Left and right rotation angleanimation: true, //Whether to display animationDurationUpdate: 1000, //Animation timedistance: 130, //Distance from view to subjectminBeta: -9999, //Minimum (left) rotation degreemaxBeta: 9999, //Maximum (right) rotation angleautoRotate: false,
                  autoRotateDirection: 'cw',
                  autoRotateSpeed: 10,

                },
                splitArea:{
                  areaStyle:{
                    color:'red',
                  }
                },
                light:
                  main: {
                    intensity: 1.2,
                    // color: 'transparent',
                    color: '#0D3867',
                    shadowQuality: 'ultra',
                    shadow: true,
                    alpha: 150,
                    beta: 200
                  },
                  ambient:
                    intensity: 1, //ambient light intensity},
                  ambientCubemap:
                    diffuseIntensity: 1,
                    texture: ''
                  }
                },
                groundPlane:
                  show:false
                },
                postEffect: {
                  enable: false
                },
                itemStyle: {
                  color: '#175096',
                  borderColor: 'rgb(62,215,213)',
                  opacity: 0.8, //transparency borderWidth: 1
                },
                label: {
                  show:false
                },
                emphasis:
                  label: {
                    show:false
                  },
                  itemStyle: {
                  }
                },
                silent: false, // Do not respond to or trigger mouse events},
              series: [
                {
                  type: 'scatter3D',
                  coordinateSystem: 'geo3D',
                  data: this.areaName
                  symbol: 'circle',
                  symbolSize: 0,
                  silent: false, // Do not respond to or trigger mouse events itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  label: {
                    distance: 30,
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    bottom: '100',
                    textStyle: {
                      color: '#fff',
                      marginTop: 40,
                      fontSize: 16,
                      // fontWeight:'bold',
                      backgroundColor: 'transparent',
                    }
                  }
                },
                {

                  type: 'scatter3D',
                  coordinateSystem: 'geo3D',
                  data: pinArr,
                  color: '#6EAFE3',
                  symbol: 'pin',
                  symbolSize: 56,
                  symbolOffset: ['100%','50%','0'],
                  silent: false, // Do not respond to or trigger mouse events itemStyle: {
                    textAlign: 'center',
                    borderColor: '#6EAFE3',
                    backgroundColor: '#6EAFE3',
                    borderWidth: 0
                  },
                  zlevel: -10,
                  label: {
                    show: true,
                    distance: -45,
                    // left: -10,
                    position: 'bottom',
                    formatter: (data) => {
                      return data.value[3] + ' ';
                    },
                    textStyle: {
                      color: '#333',
                      backgroundColor: 'transparent'
                    }
                  }
                },

              ]
            };

echartsMap.setOption(this.echartsDataMap);

regions:      
                {
                  name: 'Zhengzhou City', /
                  itemStyle: {
                      color: 'green'
                  }
                },{
                  name: 'Nanyang City', 
                  itemStyle: {
                      color: 'green'
                  }
                },{
                  name: 'Shangqiu City',
                  itemStyle: {
                      color: 'green'
                  }
                }]