Heim > Artikel > Backend-Entwicklung > ECharts und Golang: Tipps und Erfahrungen zur Erstellung praktischer statistischer Diagramme

ECharts und Golang: Tipps und Erfahrungen zur Erstellung praktischer statistischer Diagramme

PHPzOriginal: 2023-12-17 09:04:361160Durchsuche

ECharts和golang: 制作实用的统计图表的技巧与经验

ECarts und Golang: Fähigkeiten und Erfahrung in der Erstellung praktischer statistischer Diagramme, spezifische Codebeispiele sind erforderlich

Mit der Popularität der Datenverarbeitung ist die Datenvisualisierung in vielen Anwendungsbereichen zu einer wesentlichen Fähigkeit geworden. Und es sind auch Tools zum Erstellen von Diagrammen entstanden. ECharts ist ein Open-Source-Datenvisualisierungstool und Golang ist eine hocheffiziente Sprache mit hoher Parallelität. Durch die Kombination der beiden können effiziente und praktische Diagramme erstellt werden.

In diesem Artikel werden die Fähigkeiten und Erfahrungen bei der Verwendung von ECharts und Golang zur Erstellung praktischer statistischer Diagramme vorgestellt und spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir Daten vom Backend zum Frontend übergeben. In Golang können Sie das http-Paket verwenden, um einfache Webdienste zu implementieren. Hier ist zum Beispiel ein einfacher Webserver:

package main

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

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

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {"January", 10},
            {"February", 20},
            {"March", 30},
            {"April", 25},
            {"May", 15},
            {"June", 5},
        }

        jsonData, err := json.Marshal(data)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

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

    http.ListenAndServe(":8080", nil)
}

Als nächstes verwenden wir ECharts im Frontend, um Daten anzuzeigen. Zuerst muss ECharts in HTML eingeführt werden:

<!DOCTYPE html>
<html>
<head>
  <title>Chart Example</title>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

Wir haben ECharts im Head-Tag eingeführt und ein Div im Body platziert, um das Diagramm zu hosten. Gleichzeitig haben wir auch eine js-Datei namens „chart.js“ zum Laden von Daten und Zeichnen von Diagrammen eingeführt.

Hier ist unser Code zum Zeichnen von Diagrammen mit ECharts:

fetch('/').then(function(response) {
    return response.json();
}).then(function(data) {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'My Chart',
            left: 'center',
        },
        tooltip: {},
        xAxis: {
            data: data.map(function(item) {
                return item.label;
            })
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: data.map(function(item) {
                return item.value;
            })
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});

Der Code verwendet die Fetch-Funktion zum Anfordern von Daten und die json()-Methode zum Parsen der Antwortdaten in ein JSON-Objekt. Anschließend haben wir eine ECharts-Instanz erstellt und einen Titel, einen Tooltip, X/Y-Achsen und eine Balkenreihe für das Diagramm eingerichtet.

Zum Schluss führen Sie den Server mit Golang in der Anwendung aus und öffnen die HTML-Datei im Browser. An dieser Stelle sehen wir ein mit ECharts und Golang erstelltes Diagramm, das einige Daten anzeigt, die wir im Backend definiert haben.

Das Obige ist ein einfaches Beispiel für die Verwendung von ECharts und Golang zum Erstellen praktischer statistischer Diagramme. Wenn Sie komplexere Diagramme erstellen müssen, finden Sie entsprechende Konfigurationsoptionen in der offiziellen Dokumentation von ECharts und können Golang zum Verwalten von Daten verwenden. Durch ständiges Ausprobieren und Üben werden Sie in der Lage sein, Diagramme zu erstellen, die sowohl äußerst praktisch als auch schön sind.

Das obige ist der detaillierte Inhalt vonECharts und Golang: Tipps und Erfahrungen zur Erstellung praktischer statistischer Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

golang json echarts html 并发 JS 对象 http

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：Vom Anfänger bis zum Experten: Verwenden Sie ECharts und Golang, um statistische Diagramme auf professionellem Niveau zu erstellenNächster Artikel：Vom Anfänger bis zum Experten: Verwenden Sie ECharts und Golang, um statistische Diagramme auf professionellem Niveau zu erstellen

In Verbindung stehende Artikel

Mehr sehen