VUE führt die Implementierung der Verwendung von G2-Diagrammen ein

npm installiere @antv/g2

<div id="webInfo"></div>

importiere G2 von „@antv/g2“;

const chart = neues G2.Chart({})

Diagramm = neues G2.Chart({       
        Container: "webInfo", //Geben Sie den Diagrammcontainer an. ForceFit: true, //Erzwungene Anpassung. Breite: 600, //Geben Sie die Breite des Diagramms an. Höhe: 306, //Höhe. Polsterung: [20, 30, 30, 50], //Polsterung})

/Diagramm jetzt aktualisieren/ 
chart.changeData(diagrammDaten) 

/Aktualisieren Sie einfach die Daten, das Diagramm muss nicht sofort aktualisiert werden/ 
Diagramm.Quelle(Diagrammdaten) 

/Aufrufen, wenn das Diagramm aktualisiert werden muss/ 
chart.repaint()

/alles reinigen/
Diagramm.klar(); 

<Vorlage>
  <div id="c1"></div>
</Vorlage>
<Skript>
    Standard exportieren {
        Name: "spektakuläre",
        Daten(){
            zurückkehren {
                grundlegendeColumnChartProp:{
                    data:[{ genre: 'Sport', verkauft: 275 },
                        { Genre: 'Strategie', verkauft: 115 },
                        { Genre: 'Action', verkauft: 120 },
                        { Genre: 'Shooter', verkauft: 350 },
                        { Genre: 'Sonstiges', verkauft: 150 }],
                    Container: „c1“,
                    Breite: 700,
                    Höhe:600
                },
            }
        },
        Methoden:{
            prüfen(){
                const data = this.basicColumnChartProp.data;
                const chart = neues G2.Chart({
                    Container: this.basicColumnChartProp.container,
                    Breite: this.basicColumnChartProp.width,
                    Höhe: this.basicColumnChartProp.height
                });
                Diagramm.Quelle(Daten);
                chart.interval().position('Genre*verkauft').color('Genre')
                Diagramm.render();
            }
        },    
        montiert() {
          dies.test();
        },
    }
</Skript>

<Vorlage>
  <div id="c1"></div>
</Vorlage>
<Skript>
    const DataSet = erfordern('@antv/data-set');
    Standard exportieren {
        Name: "spektakuläre",
        Daten(){
            zurückkehren {
                grundlegendeColumnChartProp:{
                    Container: „c1“,
                },
            }
        },
        Methoden:{
            prüfen(){
              holen('src/views/dataCenter/data/world/countries.geo.json')
              .then(res => res.json())
              .then(mapData => {
                const chart = neues G2.Chart({
                  Container:dieses.basicColumnChartProp.container,
                  forceFit: wahr,
                  Höhe:700,
                  Polsterung: [10,10]
                });
                Diagramm.Tooltip({
                  Titel anzeigen: false
                });
                // Synchrone Metriken chart.scale({
                  Länge:
                    Synchronisierung: wahr
                  },
                  Breite:
                    Synchronisierung: wahr
                  }
                });
                Diagramm.Achse(falsch);
                chart.legend('trend', {
                  Position: 'links'
                });
 
                // Den Hintergrund der Weltkarte zeichnen const ds = new DataSet();
                const worldMap = ds.createView('zurück')
                  .source(mapData, {
                    Typ: „GeoJSON“
                  });
                const worldMapView = chart.view();
                worldMapView.source(Weltkarte);
                worldMapView.tooltip(false);
                worldMapView.polygon().position('Länge*Breite').style({
                  füllen: '#fff',
                  Strich: '#ccc',
                  Linienbreite: 1
                });
 
                const Benutzerdaten = [
                  { Name: 'Russland', Wert: 86,8 },
                  { Name: 'China', Wert: 106,3 },
                  { Name: 'Japan', Wert: 94,7 },
                  { Name: 'Mongolei', Wert: 98 },
                  { Name: 'Kanada', Wert: 98,4 },
                  { Name: 'Vereinigtes Königreich', Wert: 97,2 },
                  { name: 'Vereinigte Staaten von Amerika', value: 98.3 },
                  { Name: 'Brasilien', Wert: 96,7 },
                  { Name: 'Argentinien', Wert: 95,8 },
                  { Name: 'Algerien', Wert: 101,3 },
                  { Name: 'Frankreich', Wert: 94,8 },
                  { Name: 'Deutschland', Wert: 96,6 },
                  { Name: 'Ukraine', Wert: 86,3 },
                  { Name: 'Ägypten', Wert: 102,1 },
                  { Name: 'Südafrika', Wert: 101,3 },
                  { Name: 'Indien', Wert: 107,6 },
                  { Name: 'Australien', Wert: 99,9 },
                  { Name: 'Saudi-Arabien', Wert: 130,1 },
                  { Name: 'Afghanistan', Wert: 106,5 },
                  { Name: 'Kasachstan', Wert: 93,4 },
                  { Name: 'Indonesien', Wert: 101,4 }
                ];
                const userDv = ds.createView()
                  .source(Benutzerdaten)
                  .verwandeln({
                    geoDataView: Weltkarte,
                    Feld: 'Name',
                    Typ: „geo.region“,
                    als: [ 'Längengrad', 'Breitengrad' ]
                  })
                  .verwandeln({
                    Typ: "Karte",
                    Rückruf: obj => {
                      // obj.trend = obj.wert
                      obj.trend = (obj.value > 100) ? „Mehr Männer“ : „Mehr Frauen“;
                      gibt Objekt zurück;
                    }
                  });
                const userView = chart.view();
                Benutzeransicht.source(BenutzerDv, {
                  Trend: {
                    Alias: „Anzahl der Männer pro 100 Frauen“
                  }
                });
                Benutzeransicht.polygon()
                  .position('Längengrad*Breitengrad')
                  .Farbe('Trend', [ '#F51D27', '#0A61D7' ])
                  .opacity('Wert')
                  .tooltip('Name*Trend')
                  .animieren({
                    verlassen:
                      Animation: „Ausblenden“
                    }
                  });
                Diagramm.render();
              })
            },
        },
        montiert() {
          dies.test();
        },
    }
</Skript>