echars 3D-Kartenlösung für benutzerdefinierte Farben von Regionen

Lassen Sie echartsMap = this.$echarts.init(this.$refs.echartsMap);

this.$echarts.registerMap('GeoLocation', dataGeoLocation);
//Die dataGeoLocation hinten ist die Karten-JSON-Datei, die wir heruntergeladen und dann zur Verwendung in die aktuelle //Komponente eingefügt haben, und das Henan vorne ist die Karte, die wir registrieren möchten.

 diese.echartsDataMap = {
              visuelle Karte:
                Mindestwert: 0,
                max: 500,
                anzeigen: falsch,
                im Bereich: {
                  Farbe: ['#eac736', '#6EAFE3'].reverse()
                },

              },
              GlobusRadius: 100,
              GlobusAußenradius: 100,
              geo3D:
                Karte: Kartenname,
                Ansichtssteuerung: {
                  Mitte: [0, 0, 0],
                  alpha: 100, //Rotationswinkel nach oben und untenbeta: 10, //Rotationswinkel nach links und rechtsanimation: true, //Ob die Animation angezeigt werden sollDurationUpdate: 1000, //Animationszeitdistance: 130, //Entfernung von der Ansicht zum MotivminBeta: -9999, //Minimaler (linker) RotationsgradmaxBeta: 9999, //Maximaler (rechter) RotationswinkelautoRotate: false,
                  autoRotateDirection: "cw",
                  automatischeDrehgeschwindigkeit: 10,

                },
                geteilter Bereich:{
                  BereichStil:{
                    Farbe: "rot",
                  }
                },
                Licht:
                  hauptsächlich: {
                    Intensität: 1,2,
                    // Farbe: 'transparent',
                    Farbe: '#0D3867',
                    Schattenqualität: "ultra",
                    Schatten: wahr,
                    Alpha: 150,
                    Beta: 200
                  },
                  Umgebung:
                    Intensität: 1, //Umgebungslichtintensität},
                  Umgebungswürfelkarte:
                    diffuseIntensität: 1,
                    Textur: ''
                  }
                },
                Grundebene:
                  anzeigen:false
                },
                postEffekt: {
                  aktivieren: false
                },
                Artikelstil: {
                  Farbe: '#175096',
                  Rahmenfarbe: 'rgb(62,215,213)',
                  Deckkraft: 0,8, //Transparenz Rahmenbreite: 1
                },
                Etikett: {
                  anzeigen:false
                },
                Schwerpunkt:
                  Etikett: {
                    anzeigen:false
                  },
                  Artikelstil: {
                  }
                },
                silent: false, // Nicht auf Mausereignisse reagieren oder diese auslösen},
              Serie: [
                {
                  Typ: 'scatter3D',
                  Koordinatensystem: "geo3D",
                  Daten: dieser.Bereichsname
                  Symbol: 'Kreis',
                  Symbolgröße: 0,
                  silent: false, // Nicht auf Mausereignisse reagieren oder diese auslösen itemStyle: {
                    Rahmenfarbe: '#fff',
                    Rahmenbreite: 1
                  },
                  Etikett: {
                    Entfernung: 30,
                    zeigen: wahr,
                    Formatierer: "{b}",
                    Position: 'unten',
                    unten: '100',
                    Textstil: {
                      Farbe: '#fff',
                      Rand oben: 40,
                      Schriftgröße: 16,
                      // Schriftstärke: 'fett',
                      Hintergrundfarbe: 'transparent',
                    }
                  }
                },
                {

                  Typ: 'scatter3D',
                  Koordinatensystem: "geo3D",
                  Daten: pinArr,
                  Farbe: '#6EAFE3',
                  Symbol: 'Stecknadel',
                  symbolGröße: 56,
                  symbolOffset: ['100%','50%','0'],
                  silent: false, // Nicht auf Mausereignisse reagieren oder diese auslösen itemStyle: {
                    Textausrichtung: "zentriert",
                    Rahmenfarbe: '#6EAFE3',
                    Hintergrundfarbe: '#6EAFE3',
                    Rahmenbreite: 0
                  },
                  z-Ebene: -10,
                  Etikett: {
                    zeigen: wahr,
                    Entfernung: -45,
                    // links: -10,
                    Position: 'unten',
                    Formatierer: (Daten) => {
                      gebe Datenwert zurück[3] + ' ';
                    },
                    Textstil: {
                      Farbe: '#333',
                      Hintergrundfarbe: „transparent“
                    }
                  }
                },

              ]
            };

echartsMap.setOption(diese.echartsDataMap);

Regionen:      
                {
                  Name: 'Stadt Zhengzhou', /
                  Artikelstil: {
                      Farbe: 'grün'
                  }
                },{
                  Name: 'Nanyang Stadt', 
                  Artikelstil: {
                      Farbe: 'grün'
                  }
                },{
                  Name: 'Shangqiu Stadt',
                  Artikelstil: {
                      Farbe: 'grün'
                  }
                }]