Praktischer Leitfaden zu ECharts und Golang: Erstellen verschiedener Arten von statistischen Diagrammen

ECharts und Golang-Übungsleitfaden: Erstellen verschiedener Arten von statistischen Diagrammen

Mit dem Aufkommen des digitalen Zeitalters ist der Wert von Daten immer wichtiger geworden. Der Wert von Daten besteht jedoch nur in ihrer Analyse und Nutzung. Um Daten besser analysieren zu können, sind Diagramme eines der wesentlichen Werkzeuge. In diesem Artikel stellen wir vor, wie Sie mit ECharts und Golang, zwei bekannten Tools, verschiedene Arten von statistischen Diagrammen erstellen.

Vorbereitung

Zunächst müssen wir die ECharts- und Golang-Umgebungen vorbereiten.

ECharts ist eine JavaScript-basierte Open-Source-Datenvisualisierungsbibliothek mit guter Interaktivität und dynamischen Effekten, die mehrere Diagrammtypen unterstützt. Wir können ECharts auf die folgenden zwei Arten installieren:

1. Laden Sie die Datei echarts.js direkt herunter und führen Sie sie in HTML ein.
2. Verwenden Sie npm zur Installation.

Hier wählen wir die erste Methode. Nach dem Herunterladen stellen wir sie einfach in die HTML-Datei ein :

<script src="/path/echarts.min.js"></script>

golang ist eine statisch typisierte, kompilierte Sprache, die Parallelität und Effizienz betont und häufig in der Back-End-Entwicklung verwendet wird. Wir müssen die Golang-Umgebung installieren, die durch Herunterladen des entsprechenden Installationspakets von der offiziellen Website installiert werden kann.

Erstellen Sie ein Balkendiagramm

Ein Balkendiagramm ist ein gängiger Diagrammtyp, der Unterschiede in Daten anzeigt. Im Folgenden wird beschrieben, wie ECharts und Golang zum Implementieren von Histogrammen verwendet werden.

Zuerst müssen wir die erforderlichen Daten vorbereiten. Zum Beispiel in Golang:

data := []int{120, 200, 150, 80, 70, 110, 130}

Dann müssen wir eine Instanz von ECharts definieren und die grundlegenden Eigenschaften des Diagramms festlegen. Zum Beispiel:

var chart = echarts.init(document.getElementById('chart'));

var option = {
  title: {
    text: '柱状图'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'bar',
    data: data
  }]
};

chart.setOption(option);

Im Code definieren wir eine ECharts-Instanz, geben die ID des Diagramms an und definieren dann die grundlegenden Eigenschaften des Diagramms, einschließlich Titel, X/Y-Achse und Datenreihen. Abschließend legen wir diese Eigenschaften über die setOption-Methode für das Diagramm fest.

Erstellen Sie ein Liniendiagramm

Ein Liniendiagramm ist eine Art Diagramm, das Datentrends zeigt. Im Folgenden wird beschrieben, wie Sie mit ECharts und Golang ein Liniendiagramm implementieren.

Zuerst müssen wir die erforderlichen Daten vorbereiten. Zum Beispiel in Golang:

xData := []string{"2010", "2011", "2012", "2013", "2014", "2015", "2016"}
yData := []int{120, 200, 150, 80, 70, 110, 130}

Dann müssen wir eine Instanz von ECharts definieren und die grundlegenden Eigenschaften des Diagramms festlegen. Zum Beispiel:

var chart = echarts.init(document.getElementById('chart'));

var option = {
  title: {
    text: '折线图'
  },
  tooltip: {},
  xAxis: {
    data: xData
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'line',
    data: yData
  }]
};

chart.setOption(option);

Im Code definieren wir eine ECharts-Instanz, geben die ID des Diagramms an und definieren dann die grundlegenden Eigenschaften des Diagramms, einschließlich Titel, X/Y-Achse und Datenreihen. Der Unterschied besteht darin, dass wir hier den Typ der Datenreihe auf Linie festlegen, was dem Polylinientyp entspricht.

Erstellen Sie ein Kreisdiagramm

Ein Kreisdiagramm ist eine Art Diagramm, das den Anteil der Daten anzeigt. Im Folgenden wird beschrieben, wie Sie mit ECharts und Golang ein Kreisdiagramm implementieren.

Zuerst müssen wir die erforderlichen Daten vorbereiten. Zum Beispiel in Golang:

data := []struct {
  Value float64 `json:"value"`
  Name  string  `json:"name"`
}{
  {Value: 335, Name: "A"},
  {Value: 310, Name: "B"},
  {Value: 234, Name: "C"},
  {Value: 135, Name: "D"},
  {Value: 1548, Name: "E"}
}

Dann müssen wir eine Instanz von ECharts definieren und die grundlegenden Eigenschaften des Diagramms festlegen. Zum Beispiel:

var chart = echarts.init(document.getElementById('chart'));

var option = {
  title: {
    text: '饼图'
  },
  tooltip: {},
  series: [{
    name: '数据',
    type: 'pie',
    radius: '50%',
    data: data,
    roseType: 'angle'
  }]
};

chart.setOption(option);

Im Code definieren wir eine ECharts-Instanz, geben die ID des Diagramms an und definieren dann die grundlegenden Eigenschaften des Diagramms, einschließlich Titel und Datenreihe. Der Unterschied besteht darin, dass wir hier den Typ der Datenreihe auf „pie“ festlegen, was dem Typ des Kreisdiagramms entspricht, und andere Eigenschaften des Kreisdiagramms festlegen, z. B. „radius“ und „roseType“.

Zusammenfassend haben wir die Verwendung von ECharts und Golang zum Erstellen von Balkendiagrammen, Liniendiagrammen und Kreisdiagrammen vorgestellt und spezifische Codebeispiele bereitgestellt. Natürlich ist dies nur die Spitze des Eisbergs von ECharts und Golang. Beide Tools verfügen über sehr umfangreiche Nutzungsszenarien und Funktionen, die der Leser weiter erlernen und vertiefen kann.

Das obige ist der detaillierte Inhalt vonPraktischer Leitfaden zu ECharts und Golang: Erstellen verschiedener Arten von statistischen Diagrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!