Heim > Artikel > Backend-Entwicklung > So zeichnen Sie ganz einfach verschiedene statistische Diagramme mit ECharts und Golang
So zeichnen Sie ganz einfach verschiedene statistische Diagramme mit ECharts und Golang
- 王林Original
- 2023-12-18 15:40:191206Durchsuche
Mit der steigenden Nachfrage nach Datenanalysen ist das Zeichnen verschiedener statistischer Diagramme zu einem sehr verbreiteten Bedürfnis geworden. ECharts und Golang sind zwei sehr gute Tools, mit denen wir ganz einfach verschiedene Diagramme zeichnen können. Im Folgenden werde ich vorstellen, wie ECharts und Golang verwendet werden, um diesen Zweck zu erreichen, und gleichzeitig einige spezifische Codebeispiele bereitstellen.
- Installieren und Verwenden von ECharts
Bevor wir ECharts verwenden, müssen wir es zuerst installieren. Sie können die neueste stabile Version auf der offiziellen Website (https://echarts.apache.org) herunterladen und den Anweisungen zur Installation folgen. Nachdem die Installation abgeschlossen ist, können wir mit ECharts beginnen, verschiedene Arten von Diagrammen zu zeichnen.
Bei der Verwendung von ECharts müssen wir ein Array mit allen Daten vorbereiten und es dann an ECharts übergeben, um automatisch das entsprechende Diagramm zu generieren. Unten finden Sie einen einfachen Beispielcode, der ein Histogramm zeichnet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [5, 20, 36, 10, 10, 20];
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>Wie Sie sehen können, enthält dieser Beispielcode eine HTML-Seite mit einem darin eingefügten JavaScript-Array mit Daten. ECharts wandelt die Daten automatisch in ein Histogramm um und rendert es für das Element mit der ID „main“.
Darüber hinaus bietet ECharts auch verschiedene Arten von Diagrammen, wie Liniendiagramme, Kreisdiagramme, Streudiagramme usw. Wir können je nach tatsächlichem Bedarf verschiedene Diagrammtypen auswählen.
- Verwenden Sie Golang zur Datenaufbereitung
Golang ist eine sehr beliebte Programmiersprache. Sie unterstützt eine Vielzahl von Datenstrukturen und verschiedenen Operationen und eignet sich sehr gut für die Datenverarbeitung. Bevor wir ECharts verwenden, müssen wir normalerweise alle zu zeichnenden Diagrammdaten vorbereiten und in ein Format konvertieren, das von ECharts erkannt werden kann. Golang kann uns helfen, diese Arbeit abzuschließen.
Das Folgende ist ein einfaches Golang-Programm, das ein Array mit 100 Zufallszahlen generieren und in Daten im JSON-Format ausgeben kann.
package main
import (
"encoding/json"
"fmt"
"math/rand"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
data := make([]Data, 0)
for i := 0; i < 100; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
fmt.Println(string(jsonData))
}In diesem Programm verwenden wir das Rand-Paket, um ein Array mit 100 Zufallszahlen zu generieren und es dann in Daten im JSON-Format zu konvertieren. Diese JSON-Daten können von ECharts direkt erkannt und zum Zeichnen verschiedener Diagrammtypen verwendet werden.
- ECharts und Golang integrieren
Mit ECharts und Golang können wir beginnen, die beiden zu integrieren und verschiedene Arten von Diagrammen zu zeichnen. Unten sehen Sie ein einfaches Golang-Programm, das ein JSON-Array mit zufälligen Daten generiert und es an eine HTML-Seite übergibt. Auf der HTML-Seite können wir ECharts verwenden, um diese Daten in ein Histogramm zu zeichnen.
Golang-Code:
package main
import (
"encoding/json"
"fmt"
"math/rand"
"net/http"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make([]Data, 0)
for i := 0; i < 10; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
fmt.Fprintf(w, `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = %s;
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>
`, jsonData)
})
http.ListenAndServe(":8080", nil)
}In diesem Code verwenden wir das Paket net/http, um einen einfachen Webserver zu erstellen und beim Zugriff auf das Stammverzeichnis ein JSON-Array mit zufälligen Daten auszugeben. Dieses JSON-Array kann direkt von HTML-Seiten verwendet werden.
HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>Auf dieser HTML-Seite verwenden wir die Methode JSON.parse(), um die von Golang generierten JSON-Daten in ein Javascript-Array zu analysieren und sie dann an ECharts zu übergeben. Schließlich erhalten wir ein schönes Histogramm.
Das obige ist der detaillierte Inhalt vonSo zeichnen Sie ganz einfach verschiedene statistische Diagramme mit ECharts und Golang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!