Von vorne beginnen: Mit ECharts und Golang schöne statistische Diagramme erstellen-Golang-php.cn

Von vorne beginnen: Mit ECharts und Golang schöne statistische Diagramme erstellen

PHPz

Freigeben： 2023-12-17 09:35:36

Original

1193 Leute haben es durchsucht

Von vorne beginnen: Mit ECharts und Golang schöne statistische Diagramme erstellen

Fangen Sie bei Null an: Verwenden Sie ECharts und Golang, um schöne statistische Diagramme zu erstellen

Im Zeitalter der Datenvisualisierung sind statistische Diagramme zu einem wichtigen Werkzeug für die Anzeige von Daten geworden. Als leistungsstarke und benutzerfreundliche Open-Source-Bibliothek bietet uns ECharts eine Vielzahl von Diagrammtypen und reichhaltigen Diagrammstilen. In Kombination mit Golang, einer effizienten und leistungsstarken Programmiersprache, können wir ganz einfach schöne und interaktive Statistikdiagramme erstellen.

In diesem Artikel erfahren Sie von Grund auf, wie Sie mit ECharts und Golang ein einfaches statistisches Diagramm erstellen. Wir werden Golang als Backend-Sprache verwenden, um die Daten abzurufen und sie an die ECharts-Bibliothek im Frontend weiterzuleiten, um Diagramme zu generieren. Lasst uns beginnen!

Zuerst müssen wir die Golang- und ECharts-Bibliotheken installieren. Wenn Sie Golang noch nicht installiert haben, können Sie es von der offiziellen Website herunterladen und installieren: https://golang.org/

Als nächstes müssen wir die ECharts-Bibliothek installieren. Die Installationsmethode finden Sie in der offiziellen Dokumentation von ECharts: https://echarts.apache.org/zh/index.html

Nach der Installation erstellen wir ein neues Golang-Projekt und erstellen eine Datei mit dem Namen main.go im Projektverzeichnis. main.go的文件。

第一步，我们需要导入必要的golang包：

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

Nach dem Login kopieren

第二步，我们创建一个简单的数据结构，表示我们的统计数据：

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

Nach dem Login kopieren

第三步，我们创建一个handler函数来处理HTTP请求，并将数据以JSON格式返回给前端：

func handler(w http.ResponseWriter, r *http.Request) {
    data := []Data{
        {Label: "Apple", Value: 10},
        {Label: "Banana", Value: 20},
        {Label: "Orange", Value: 15},
    }

    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(jsonData)
}

Nach dem Login kopieren

第四步，我们创建一个main函数，并启动一个HTTP服务器来监听请求：

func main() {
    http.HandleFunc("/data", handler)
    http.ListenAndServe(":8080", nil)
}

Nach dem Login kopieren

接下来，我们回到ECharts的前端部分。在项目目录下创建一个名为index.html的文件，并在其中加入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        fetch('/data')
            .then(response => response.json())
            .then(data => {
                const chart = echarts.init(document.getElementById('chart'));
                
                const options = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        type: 'bar',
                        data: data.map(item => item.value),
                    }],
                };
                
                chart.setOption(options);
            });
    </script>
</body>
</html>

Nach dem Login kopieren

最后，我们打开终端，进入项目目录并运行go run main.go启动我们的golang服务器。

在浏览器中访问http://localhost:8080

Im ersten Schritt müssen wir die notwendigen Golang-Pakete importieren:

rrreee

Im zweiten Schritt erstellen wir eine einfache Datenstruktur zur Darstellung unserer Statistiken:

rrreee

Im dritten Schritt erstellen wir eine Handler-Funktion zur Verarbeitung HTTP-Anfrage und Rückgabe der Daten an das Frontend im JSON-Format: 🎜rrreee🎜Im vierten Schritt erstellen wir eine Hauptfunktion und starten einen HTTP-Server, der auf Anfragen wartet: 🎜rrreee🎜Als nächstes kehren wir zum Front-End zurück- Endteil von ECharts. Erstellen Sie eine Datei mit dem Namen index.html im Projektverzeichnis und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜Schließlich öffnen wir das Terminal, geben das Projektverzeichnis ein und führen go run main.go aus Starten Sie unseren Golang-Server. 🎜🎜Besuchen Sie http://localhost:8080 in Ihrem Browser. Sie sehen eine Seite mit statistischen Diagrammen. In diesem Diagramm werden unsere Daten als Balkendiagramm dargestellt. 🎜🎜Anhand dieses einfachen Beispiels haben wir gelernt, wie man mit ECharts und Golang schöne statistische Diagramme erstellt. Sie können die Daten- und Diagrammtypen entsprechend Ihren eigenen Anforderungen ändern, und ECharts bietet zahlreiche Optionen, um unterschiedlichen Anforderungen gerecht zu werden. 🎜🎜Ich hoffe, dass dieser Artikel für Sie hilfreich ist, und ich wünsche Ihnen, dass Sie auf dem Weg der Datenvisualisierung immer weiter vorankommen! 🎜

Das obige ist der detaillierte Inhalt vonVon vorne beginnen: Mit ECharts und Golang schöne statistische Diagramme erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!