ECharts- und Golang-Tutorial: Praktische Tipps zum Erstellen verschiedener statistischer Diagramme

WBOY
Freigeben: 2023-12-17 21:15:43
Original
1055 Leute haben es durchsucht

ECharts和golang教程: 制作各类统计图表的实用技巧

ECharts- und Golang-Tutorial: Praktische Tipps zum Erstellen verschiedener statistischer Diagramme, spezifische Codebeispiele sind erforderlich

Einführung
Im Bereich der Datenanalyse und -visualisierung sind statistische Diagramme sehr wichtige Werkzeuge. Sie können komplexe Daten in intuitive, leicht verständliche Formen umwandeln und uns so helfen, Daten besser zu verstehen und zu analysieren. ECharts ist eine leistungsstarke Open-Source-JavaScript-Diagrammbibliothek und Golang ist eine benutzerfreundliche und effiziente Programmiersprache. Durch die Kombination beider können wir verschiedene statistische Diagramme effizienter erstellen.

In diesem Artikel wird erläutert, wie Sie mit ECharts und Golang verschiedene Arten von statistischen Diagrammen erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Vorbereitung
Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie ECharts und Golang installiert haben. ECharts kann von der offiziellen Website (https://echarts.apache.org/) heruntergeladen und verwendet werden, während Golang von der offiziellen Website (https://golang.org/) heruntergeladen und installiert werden kann.

Praktischer Tipp 1: Erstellen Sie ein Balkendiagramm
Ein Balkendiagramm ist eine gängige Art von statistischem Diagramm, das zum Vergleichen von Daten zwischen verschiedenen Kategorien verwendet wird. Unten finden Sie einen Beispielcode zum Erstellen eines Histogramms mit ECharts und Golang:

//引入必要的golang依赖包
package main
import (
    "fmt"
    "net/http"
)

//处理请求的函数
func handler(w http.ResponseWriter, r *http.Request) {
    //模拟数据
    data := [][2]interface{}{
        {"类别1", 100},
        {"类别2", 200},
        {"类别3", 300},
    }
    
    //生成图表配置项
    option := map[string]interface{}{
        "tooltip": map[string]interface{}{
            "trigger": "axis",
        },
        "xAxis": map[string]interface{}{
            "type": "category",
            "data": []string{"类别1", "类别2", "类别3"},
        },
        "yAxis": map[string]interface{}{
            "type": "value",
        },
        "series": []map[string]interface{}{
            {
                "type": "bar",
                "data": []int{100, 200, 300},
            },
        },
    }

    //生成图表html
    html := fmt.Sprintf(`<div id="chart" style="width:600px;height:400px;"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
        <script type="text/javascript">
            var chart = echarts.init(document.getElementById('chart'));
            chart.setOption(%s);
        </script>`, option)
    
    //返回html
    fmt.Fprint(w, html)
}

func main() {
    //将处理函数指定为路由处理函数
    http.HandleFunc("/", handler)
    
    //监听端口
    http.ListenAndServe(":8080", nil)
}
Nach dem Login kopieren

Der obige Code zeigt, wie Sie mit ECharts und Golang ein einfaches Histogramm erstellen. Zuerst definieren wir eine Funktion handler zur Bearbeitung der Anfrage, in der wir einige Daten simulieren und ein option-Objekt generieren, das verschiedene Konfigurationen zum Einrichten des Diagrammelements enthält. Anschließend fügen wir das option-Objekt in einen HTML-Code ein, der ECharts enthält, und geben ihn schließlich an den Browser zurück. handler,其中我们模拟了一些数据,并生成了一个option对象,该对象包含了设置图表的各种配置项。然后,我们将option对象拼接到一个包含了ECharts的html代码中,最后返回给浏览器。

要运行以上代码,可以使用命令go run main.go,然后在浏览器中访问http://localhost:8080,即可看到生成的柱状图。

实用技巧二:制作饼图
饼图是用于展示不同类别占比的统计图表。下面是一个使用ECharts和golang制作饼图的示例代码:

//引入必要的golang依赖包
package main
import (
    "fmt"
    "net/http"
)

//处理请求的函数
func handler(w http.ResponseWriter, r *http.Request) {
    //模拟数据
    data := [][2]interface{}{
        {"类别1", 100},
        {"类别2", 200},
        {"类别3", 300},
    }
    
    //生成图表配置项
    option := map[string]interface{}{
        "tooltip": map[string]interface{}{
            "trigger": "item",
            "formatter": "{a} <br/>{b}: {c} ({d}%)",
        },
        "series": []map[string]interface{}{
            {
                "name": "占比",
                "type": "pie",
                "radius": "55%",
                "data": []map[string]interface{}{
                    {
                        "value": 100,
                        "name": "类别1",
                    },
                    {
                        "value": 200,
                        "name": "类别2",
                    },
                    {
                        "value": 300,
                        "name": "类别3",
                    },
                },
            },
        },
    }

    //生成图表html
    html := fmt.Sprintf(`<div id="chart" style="width:600px;height:400px;"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
        <script type="text/javascript">
            var chart = echarts.init(document.getElementById('chart'));
            chart.setOption(%s);
        </script>`, option)
    
    //返回html
    fmt.Fprint(w, html)
}

func main() {
    //将处理函数指定为路由处理函数
    http.HandleFunc("/", handler)
    
    //监听端口
    http.ListenAndServe(":8080", nil)
}
Nach dem Login kopieren

以上代码演示了如何使用ECharts和golang制作一个简单的饼图。和制作柱状图的代码类似,我们定义了一个处理请求的函数handler,模拟了一些数据,并生成了一个option对象。这里的series配置项包含了一个pie类型的系列,用于定义饼图的数据和样式。最后,我们将option对象拼接到一个包含了ECharts的html代码中,将其返回给浏览器。

要运行以上代码,可以使用命令go run main.go,然后在浏览器中访问http://localhost:8080

Um den obigen Code auszuführen, können Sie den Befehl go run main.go verwenden und dann http://localhost:8080 im Browser aufrufen, um den generierten Code anzuzeigen Balkendiagramm.


Praxistipp 2: Erstellen Sie ein Kreisdiagramm

Ein Kreisdiagramm ist ein statistisches Diagramm, mit dem die Anteile verschiedener Kategorien dargestellt werden. Hier ist ein Beispielcode zum Erstellen eines Kreisdiagramms mit ECharts und Golang:

rrreee

Der obige Code zeigt, wie man mit ECharts und Golang ein einfaches Kreisdiagramm erstellt. Ähnlich dem Code zum Erstellen von Histogrammen definieren wir eine Funktion handler, die Anfragen verarbeitet, einige Daten simuliert und ein option-Objekt generiert. Das Konfigurationselement series enthält hier eine Serie vom Typ pie, die zum Definieren der Daten und des Stils des Kreisdiagramms verwendet wird. Schließlich fügen wir das option-Objekt in einen HTML-Code ein, der ECharts enthält, und geben ihn an den Browser zurück. 🎜🎜Um den obigen Code auszuführen, können Sie den Befehl go run main.go verwenden und dann http://localhost:8080 im Browser aufrufen, um den generierten Code anzuzeigen Kuchendiagramm. 🎜🎜Fazit🎜In diesem Artikel wird erläutert, wie Sie mit ECharts und Golang verschiedene Arten von statistischen Diagrammen erstellen, und es werden spezifische Codebeispiele bereitgestellt. Mit diesen praktischen Tipps können wir Datenanalyse- und Visualisierungsarbeiten effizienter durchführen. Natürlich verfügen ECharts und Golang über weitere Funktionen und Verwendungsmöglichkeiten, die Sie näher kennenlernen und erkunden können. 🎜🎜Ich hoffe, dieser Artikel wird Ihnen bei der Erstellung statistischer Diagramme mit ECharts und Golang hilfreich sein! 🎜

Das obige ist der detaillierte Inhalt vonECharts- und Golang-Tutorial: Praktische Tipps zum Erstellen verschiedener statistischer Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!