Heim > Artikel > Backend-Entwicklung > ECharts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme
ECarts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme
Einführung
Datenvisualisierung ist ein unverzichtbarer Bestandteil moderner Webanwendungen. ECharts ist eine leistungsstarke und flexible Open-Source-Diagrammbibliothek, während Golang eine leistungsstarke und schnelle Programmiersprache ist. Durch die Kombination der beiden können in Webanwendungen wunderschöne statistische Diagrammeffekte erzielt werden. In diesem Artikel erfahren Sie, wie Sie mit ECharts und Golang schöne statistische Diagramme erstellen und spezifische Codebeispiele bereitstellen.
1. Vorbereitung
Bevor wir beginnen, müssen wir die entsprechende Software installieren und die notwendigen Bibliotheken laden.
npm install echarts --save
go mod init your_project_name
Dann verwenden Sie den folgenden Befehl, um die erforderlichen Bibliotheken zu installieren.
go get github.com/gin-gonic/gin
2. Erstellen Sie einen Webserver. Mit dem Gin-Framework in Golang können Sie ganz einfach einen Webserver erstellen.
package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { router := gin.Default() router.LoadHTMLGlob("templates/*") router.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index.html", gin.H{}) }) router.Run(":8080") }Erstellen Sie eine Datei mit dem Namen index.html im Vorlagenordner und fügen Sie den folgenden Code hinzu.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts and golang</title> <script src="/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 在这里编写ECharts的代码 </script> </body> </html>3. Schreiben Sie ECharts-Code
In der Datei index.html können Sie ECharts-Code schreiben, um verschiedene statistische Diagramme zu erstellen.
<script> var chart = echarts.init(document.getElementById('chart')); var option = { title: { text: '柱状图' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }; chart.setOption(option); </script>Dieser Code erstellt ein Balkendiagramm, wobei die x-Achse die Klassifizierung der Daten und die y-Achse das Verkaufsvolumen zeigt. Durch Festlegen des Datenattributs der Serie können Sie die spezifischen Daten des Histogramms festlegen. Je nach Bedarf können Sie verschiedene Arten von Diagrammcodes schreiben und diese zur Datei index.html hinzufügen. 4. Führen Sie die Webanwendung aus
Verwenden Sie im Terminal den folgenden Befehl, um Ihre Golang-Anwendung auszuführen.
go run main.goÖffnen Sie als Nächstes Ihren Browser und besuchen Sie http://localhost:8080. Sie sehen eine Webseite mit einem Histogramm. Durch Schreiben des entsprechenden ECharts-Codes können Sie verschiedene Arten von statistischen Diagrammen erstellen und diese in Webanwendungen anzeigen. Fazit
Durch die Kombination von ECharts und Golang können wir ganz einfach schöne statistische Diagramme erstellen. In diesem Artikel erfahren Sie, wie Sie einen Webserver erstellen und mit ECharts Code für statistische Diagramme in einer Webanwendung schreiben. Ich hoffe, dieser Artikel kann Ihnen helfen, Ihr Verständnis von ECharts und Golang zu vertiefen und Ihren Webanwendungen lebendigere und interessantere Datenvisualisierungseffekte hinzuzufügen.
Das obige ist der detaillierte Inhalt vonECharts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!