Erfahren Sie im Tutorial, wie Sie mit ECharts und Golang beeindruckende statistische Diagramme erstellen

Lernen Sie, wie Sie mit ECharts und Golang beeindruckende statistische Diagramme erstellen. Tutorial

Im modernen Internetzeitalter ist die Datenvisualisierung eines der wichtigsten Mittel, um Benutzer anzulocken und Informationen anzuzeigen. Als eine Form der Datenvisualisierung können statistische Diagramme die Trends und Zusammenhänge von Daten klar und intuitiv darstellen. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie mit ECharts und Golang beeindruckende statistische Diagramme erstellen.

(1) Einführung in ECharts

ECharts ist eine JavaScript-basierte Open-Source-Diagrammbibliothek, die vom Front-End-Team von Baidu entwickelt wurde. Es bietet umfangreiche Diagrammtypen und flexible Konfigurationsoptionen, sodass Benutzer problemlos eine Vielzahl statistischer Diagramme erstellen können. Zu den von ECharts unterstützten Diagrammtypen gehören Liniendiagramme, Balkendiagramme, Kreisdiagramme, Streudiagramme usw.

(2) Einführung in Golang

Golang ist eine Open-Source-Programmiersprache, die von Google entwickelt und 2009 veröffentlicht wurde. Es ist effizient, zuverlässig und prägnant und eignet sich für die Entwicklung leistungsstarker serverseitiger Anwendungen. In diesem Tutorial verwenden wir Golang zum Schreiben von Back-End-Code, verwenden ECharts zum Generieren von Diagrammen und zeigen statistische Diagramme durch Dateninteraktion zwischen Front- und Back-End an.

(3) ECharts installieren

1. Laden Sie die ECharts-Bibliotheksdatei herunter

Sie können die neueste ECharts-Bibliotheksdatei von der offiziellen ECharts-Website herunterladen (https://echarts.apache.org/). Legen Sie nach dem Entpacken den ECharts-Ordner in Ihrem Projektverzeichnis ab.

2. Einführen der ECharts-Bibliotheksdatei

In der HTML-Datei müssen Sie die ECharts-Bibliotheksdatei über das Skript-Tag einführen. Zum Beispiel:

<script src="echarts.min.js"></script>

(4) Golang-Backend-Code schreiben

1. Golang installieren

Zuerst müssen Sie Golang installieren und die Umgebungsvariablen festlegen. Sie können das neueste Golang-Installationspaket von der offiziellen Golang-Website (https://golang.org/) herunterladen und gemäß der offiziellen Dokumentation installieren.

2. Golang-Projekt erstellen

Erstellen Sie in Ihrem Arbeitsverzeichnis ein neues Golang-Projekt.

3. Schreiben Sie den Golang-Code

Schreiben Sie in die Go-Datei des Projekts den folgenden Golang-Code:

package main

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

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

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

4. Führen Sie das Golang-Programm aus

Geben Sie in der Befehlszeile das Projektverzeichnis ein und führen Sie den folgenden Befehl aus, um ihn auszuführen das Golang-Programm:

go run main.go

(5) HTML- und JavaScript-Code schreiben

1. Erstellen Sie eine HTML-Datei und schreiben Sie den folgenden Inhalt in die Datei:

    


    


    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

2. Öffnen Sie den Browser und besuchen Sie die HTML-Seite

Öffnen Sie den HTML-Code Datei im Browser, Sie sehen ein einfaches statistisches Diagramm.

Das Obige ist das gesamte Tutorial zum Erstellen beeindruckender statistischer Diagramme mit ECharts und Golang. In diesem Tutorial erfahren Sie, wie Sie mit ECharts und Golang statistische Diagramme erstellen und die Datenanzeige und -interaktion realisieren. Ich hoffe, das hilft Ihnen beim Lernen und bei der Projektentwicklung!

Das obige ist der detaillierte Inhalt vonErfahren Sie im Tutorial, wie Sie mit ECharts und Golang beeindruckende statistische Diagramme erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!