Von vorne beginnen: Verwenden Sie ECharts und Golang, um vielfältige statistische Diagramme zu erstellen
Übersicht:
Angesichts der Anforderungen moderner Datenanalyse und -visualisierung ist die Erstellung vielfältiger statistischer Diagramme zu einer wichtigen Entwicklungsaufgabe geworden. ECharts ist eine auf JavaScript basierende Open-Source-Diagrammbibliothek, die eine Vielzahl von Diagrammtypen und interaktiven Funktionen bietet, um verschiedene Anforderungen an die Datenanzeige zu erfüllen. Als effiziente Server-Programmiersprache kann Golang mit ECharts kombiniert werden, um flexible und leistungsstarke Datenvisualisierungsdienste zu erzielen.
In diesem Artikel wird anhand eines konkreten Beispiels vorgestellt, wie man mit ECharts und Golang verschiedene statistische Diagramme von Grund auf erstellt. Wir werden Golang als Back-End-Framework verwenden, um mit den Front-End-ECharts zu interagieren, indem wir eine Datenschnittstelle bereitstellen, und schließlich ein dynamisch aktualisiertes Statistikdiagramm implementieren.
Schritt 1: Golang-Entwicklungsumgebung einrichten
Zunächst müssen wir die Golang-Entwicklungsumgebung lokal einrichten. Sie können auf der offiziellen Website (https://golang.org/dl/) das für Ihr Betriebssystem geeignete Golang-Installationspaket herunterladen und es dann gemäß der offiziellen Dokumentation installieren und konfigurieren.
Schritt 2: Erstellen Sie ein Golang-Projekt
Verwenden Sie in der Befehlszeile den folgenden Befehl, um ein neues Golang-Projekt zu erstellen:
mkdir golang-echarts-demo
cd golang-echarts-demo
go mod init github.com/your-username/golang-echarts-demo
Nach dem Login kopieren
Hier ist your-username Ihr Github-Benutzername, der zur Angabe des Projekts verwendet wird Importpfad. your-username是你的github用户名，用于指定项目的导入路径。
步骤三：安装golang的http库
golang中有很多第三方库可以用于处理http请求，这里我们使用标准库的net/http来搭建一个简单的http服务。在命令行中，使用以下命令安装http库：
go get -u github.com/gorilla/mux
Nach dem Login kopieren
步骤四：编写golang后端代码
在项目根目录下，创建一个名为main.go的文件，并使用以下代码编写golang后端代码：
package main
import (
"encoding/json"
"log"
"net/http"
"github.com/gorilla/mux"
)
type Data struct {
Labels []string `json:"labels"`
Values []int `json:"values"`
}
func GetData(w http.ResponseWriter, r *http.Request) {
data := Data{
Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri"},
Values: []int{120, 200, 150, 80, 300},
}
json.NewEncoder(w).Encode(data)
}
func main() {
router := mux.NewRouter()
router.HandleFunc("/data", GetData).Methods("GET")
log.Fatal(http.ListenAndServe(":8000", router))
}Nach dem Login kopieren
这段代码定义了一个名为Data的结构体，结构体中包含了图表需要的标签和数值数据。GetData函数用于处理客户端的请求，并返回一个包含标签和数值数据的json响应。
步骤五：运行golang后端服务
在命令行中，使用以下命令运行golang后端服务：
go run main.go
Nach dem Login kopieren
步骤六：创建前端页面
在项目根目录下，创建一个名为index.html的文件，并使用以下代码编写前端页面：
<!DOCTYPE html>
<html>
<head>
<title>ECharts Demo</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '统计图表'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'bar'
}]
};
setInterval(function() {
fetch('/data')
.then(response => response.json())
.then(data => {
option.xAxis.data = data.labels;
option.series[0].data = data.values;
chart.setOption(option);
});
}, 2000);
</script>
</body>
</html>Nach dem Login kopieren
这段代码使用了ECharts提供的JavaScript库，并创建了一个名为chart
Schritt 3: Golangs http-Bibliothek installieren
Es gibt viele Bibliotheken von Drittanbietern in Golang, die zur Verarbeitung von http-Anfragen verwendet werden können. Hier verwenden wir net/http der Standardbibliothek, um einen einfachen http-Dienst zu erstellen . Verwenden Sie in der Befehlszeile den folgenden Befehl, um die http-Bibliothek zu installieren:
python -m http.server
Nach dem Login kopieren
Schritt 4: Schreiben Sie den Golang-Backend-Code
Erstellen Sie im Stammverzeichnis des Projekts eine Datei mit dem Namen main.go und verwenden Sie die Folgender Code zum Schreiben des Golang-Backend-Codes:
rrreee
Dieser Code definiert eine Struktur namens Data, die die für das Diagramm erforderlichen Beschriftungen und numerischen Daten enthält. Die Funktion GetData wird verwendet, um die Anfrage des Clients zu verarbeiten und eine JSON-Antwort mit Beschriftung und numerischen Daten zurückzugeben.
🎜Schritt fünf: Führen Sie den Golang-Backend-Dienst aus🎜Verwenden Sie in der Befehlszeile den folgenden Befehl, um den Golang-Backend-Dienst auszuführen:🎜rrreee🎜Schritt sechs: Erstellen Sie die Front-End-Seite🎜Erstellen Sie im Stammverzeichnis des Projekts eine Datei mit dem Namen
index.html-Datei und verwenden Sie den folgenden Code, um die Frontend-Seite zu schreiben: 🎜rrreee🎜Dieser Code verwendet die von ECharts bereitgestellte JavaScript-Bibliothek und erstellt einen Diagrammcontainer mit dem Namen
chart. Durch regelmäßige Abfrage der Datenschnittstelle des Back-End-Dienstes und Einstellung der zurückgegebenen Daten auf die Diagrammoptionen werden dynamisch aktualisierte Statistikdiagramme implementiert. 🎜🎜Schritt 7: Führen Sie die Frontend-Seite aus. 🎜Verwenden Sie in der Befehlszeile den folgenden Befehl, um die Frontend-Seite auszuführen: 🎜rrreee🎜Dadurch wird lokal ein einfacher http-Server gestartet und die Frontend-Seite für den Browserzugriff bereitgestellt . 🎜🎜Zu diesem Zeitpunkt haben wir den Prozess der Verwendung von ECharts und Golang zur Erstellung verschiedener statistischer Diagramme abgeschlossen. Durch die Verwendung von Golang zum Aufbau von Back-End-Diensten in Kombination mit den umfangreichen Diagrammtypen und interaktiven Funktionen von ECharts können wir problemlos flexible und leistungsstarke Datenvisualisierungsdienste implementieren. Ich hoffe, dieser Artikel war hilfreich und wünsche Ihnen viel Erfolg bei Ihrer Entwicklungsarbeit im Bereich Datenvisualisierung! 🎜
Das obige ist der detaillierte Inhalt vonVon Grund auf neu: Mit ECharts und Golang verschiedene statistische Diagramme erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
