suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  ECharts und Golang in Aktion: Tutorial zum Erstellen schöner statistischer Diagramme

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

WBOY
WBOYOriginal
2023-12-18 12:52:171267Durchsuche

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.

  1. 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.
  2. 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
  1. 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

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.

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

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.

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>

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!

golang gin echarts html npm http https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie ECharts und Golang, um statistische Diagramme auf professionellem Niveau zu erstellenNächster Artikel：So verwenden Sie ECharts und Golang, um statistische Diagramme auf professionellem Niveau zu erstellen

In Verbindung stehende Artikel

Mehr sehen