Beispielcode zur Implementierung eines Radardiagramms mit vue+antv

<Vorlage>
  <div ref="Behälter" />
</Vorlage>
 
<Skript>
DataSet aus „@antv/data-set“ importieren
importiere { Diagramm } von '@antv/g2'
Standard exportieren {
// Erstelle ein Radardiagramm mounted() {
    dies.constradar()
  },
  Methoden: {
    constradar() {
      const Daten = [
        { item: 'Arbeitseffizienz', a: 70, b: 30 },
        { item: 'Anwesenheit', a: 60, b: 70 },
        { item: 'Positivität', a: 50, b: 60 },
        { item: 'Einem Kollegen helfen', a: 40, b: 50 },
        { item: 'Selbstgesteuertes Lernen', a: 60, b: 70 },
        { item: 'Genauigkeit', a: 70, b: 50 }
      ]
      const { DataView } = Datensatz
      const dv = neue DataView().source(Daten)
      dv.transform({
        Typ: 'falten',
        Felder: ['a', 'b'], // Feldsatz erweitern Schlüssel: 'Benutzer', // Schlüsselfeldwert: 'Score' // Wertefeld })
 
      const chart = neues Diagramm({
        Container: dieser.$refs.container,
        autoFit: wahr,
        Höhe: 500
      })
      Diagramm.Daten(dv.Zeilen)
      Diagramm.Skala('Punktzahl', {
        Mindestwert: 0,
        max: 80
      })
      Diagramm.Koordinate('polar', {
        Radius: 0,8
      })
      Diagramm.Tooltip({
        geteilt: wahr,
        Fadenkreuz anzeigen: true,
        Fadenkreuz:
          Linie: {
            Stil: {
              Strichzeile: [4, 4],
              Strich: '#333'
            }
          }
        }
      })
      Diagramm.Achse('Element', {
        Zeile: null,
        tickLine: null,
        Netz: {
          Linie: {
            Stil: {
              lineDash: null
            }
          }
        }
      })
      Diagramm.Achse('Ergebnis', {
        Zeile: null,
        tickLine: null,
        Netz: {
          Linie: {
            Typ: "Linie",
            Stil: {
              lineDash: null
            }
          }
        }
      })
 
      Diagramm.Linie().Position('Element*Punktzahl').Farbe('Benutzer').Größe(2)
      Diagramm
        .Punkt()
        .position('Artikel*Punktzahl')
        .color('Benutzer')
        .shape('Kreis')
        .Größe(4)
        .Stil({
          Strich: '#fff',
          Linienbreite: 1,
          Füllopacity: 1
        })
      Diagramm.Bereich().Position('Element*Punktzahl').Farbe('Benutzer')
      Diagramm.render()
 
//Daten ändern const newData = [
        { item: 'Arbeitseffizienz', a: 20, b: 30 },
        { item: 'Anwesenheit', a: 30, b: 70 },
        { item: 'Positivität', a: 10, b: 60 },
        { item: 'Einem Kollegen helfen', a: 40, b: 50 },
        { item: 'Selbstgesteuertes Lernen', a: 60, b: 70 },
        { item: 'Genauigkeit', a: 20, b: 50 }
      ]
      // Sofort aktualisieren setTimeout(() => {
        // Datenverarbeitung starten const dv = new DataView().source(newData)
        dv.transform({
          Typ: 'falten',
          Felder: ['a', 'b'], // Feldsatz erweitern Schlüssel: 'Benutzer', // Schlüsselfeldwert: 'Score' // Wertefeld })
        // Die Verarbeitung ist abgeschlossen // Benutze die verarbeiteten Daten um das Icon chart.changeData(dv.rows) zu aktualisieren
      }, 3000)
    }
  }
}
</Skript>
 
<Stil></Stil>