ECharts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme-Golang-php.cn

ECharts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme

WBOY

Freigeben： 2023-12-18 12:52:17

Original

1252 Leute haben es durchsucht

ECharts和golang实战: 制作精美的统计图表教程

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.

Golang installieren
Zuerst müssen Sie Golang herunterladen und installieren. Sie können die offizielle Golang-Website (https://golang.org/) besuchen, um die neueste Version von Golang herunterzuladen und sie gemäß der offiziellen Anleitung zu installieren.
ECharts installieren
ECharts können über npm installiert werden. Führen Sie den folgenden Befehl im Terminal aus, um ECharts zu installieren.

npm install echarts --save

Nach dem Login kopieren

Golang-Projekt erstellen
Erstellen Sie ein neues Golang-Projekt und initialisieren Sie ein neues Golang-Modul mit den folgenden Befehlen.

go mod init your_project_name

Nach dem Login kopieren

Dann verwenden Sie den folgenden Befehl, um die erforderlichen Bibliotheken zu installieren.

go get github.com/gin-gonic/gin

Nach dem Login kopieren

2. Erstellen Sie einen Webserver. Mit dem Gin-Framework in Golang können Sie ganz einfach einen Webserver erstellen.

Erstellen Sie in Ihrem Golang-Projekt eine Datei mit dem Namen main.go und fügen Sie der Datei den folgenden Code hinzu.

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")
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

3. Schreiben Sie ECharts-Code

In der Datei index.html können Sie ECharts-Code schreiben, um verschiedene statistische Diagramme zu erstellen.

Fügen Sie zunächst ein div-Element innerhalb des Body-Tags hinzu und legen Sie die Breite und Höhe fest.

Dann fügen Sie den ECharts-Code in das Skript-Tag ein.

Angenommen, wir möchten ein Histogramm zeichnen, können wir den folgenden Code verwenden.

<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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Ö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!