So zeichnen Sie ganz einfach schöne statistische Diagramme mit ECharts und Golang

So verwenden Sie ECharts und Golang, um auf einfache Weise schöne statistische Diagramme zu zeichnen

Mit der kontinuierlichen Anhäufung und Anwendung von Daten sind statistische Diagramme zu einer wichtigen Möglichkeit zur Datendarstellung geworden. In diesem Bereich ist ECharts eine beliebte Open-Source-JavaScript-Diagrammbibliothek. Sie ist leistungsstark, einfach zu verwenden und unterstützt eine große Anzahl von Stilen und Diagrammtypen und wird daher häufig in der Entwicklung verwendet. Gleichzeitig erfreut sich Golang als effiziente Programmiersprache zunehmender Beliebtheit in der Web-Backend-Entwicklung.

In diesem Artikel wird hauptsächlich die Verwendung von ECharts und Golang zum Zeichnen schöner statistischer Diagramme vorgestellt und spezifische Codebeispiele aufgeführt.

1. Vorbereitung

Bevor wir statistische Diagramme entwickeln, müssen wir die folgenden Tools und Umgebungen vorbereiten:

• Golang-Umgebung
• Beego-Framework
• ECharts-Bibliothek

Unter diesen kann die Golang-Umgebung heruntergeladen und installiert werden Auf der offiziellen Website kann das Beego-Framework über den folgenden Befehl installiert werden:

go get github.com/astaxie/beego

Die ECharts-Bibliothek kann über den folgenden Befehl installiert werden:

npm install echarts --save

2. Zeichnen eines Histogramms

Zuerst versuchen wir, ein einfaches Histogramm zu zeichnen. Der Code lautet wie folgt:

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := []int{10, 52, 200, 334, 390, 330, 220}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "bar"
}

Im Code definieren wir einen Controller namens MainController und implementieren die Get-Methode. Darunter definieren wir ein Array mit dem Namen data, das die Daten des Histogramms enthält. Anschließend übergeben wir diese Daten an die Variable „chart_data“ in der Vorlage sowie an die Diagrammtypvariable „chart_type“. Konkret haben wir „Balken“ als Histogrammtyp verwendet.

Als nächstes müssen wir die Vorlage entwerfen und die ECharts-Bibliothek verwenden, um das Diagramm zu rendern. Der Code lautet wie folgt:

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '柱状图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: '{{.chart_type}}',
            data: {{.chart_data}},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };
    myChart.setOption(option);
});
</script>

Im Code verwenden wir zunächst {{.chart_data}} und {{.chart_type}}, um die Daten und den Diagrammtyp auszugeben, damit wir beim Debuggen die Richtigkeit der Daten überprüfen können. Dann verwenden wir bedingte Anweisungen, um zu bestimmen, ob Daten übergeben wurden, und der Diagrammbereich wird erst angezeigt, nachdem die Daten übergeben wurden.

Als nächstes stellten wir die ECharts-Bibliothek vor und verwendeten die Methode echarts.init, um ein DOM-Element mit einer angegebenen ID zu initialisieren. In diesem Beispiel haben wir einige grundlegende Konfigurationselemente hinzugefügt, z. B. Titel, Tooltip, Legende, x-Achse, y-Achse, Serie usw. Unter diesen definieren xAxis und yAxis die Daten der horizontalen bzw. vertikalen Achse, und Serien werden zum Definieren der Daten des Diagramms verwendet.

3. Kreisdiagramme zeichnen

Neben Balkendiagrammen können wir auch ECharts und Golang verwenden, um andere Arten von Diagrammen zu zeichnen. Als nächstes versuchen wir, ein Kreisdiagramm zu zeichnen. Der Code lautet wie folgt:

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := map[string]int{"直接访问":335, "邮件营销":310, "联盟广告":234, "视频广告":135, "搜索引擎":1548}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "pie"
}

Im Code definieren wir eine Karte mit dem Namen data, die die Daten des Kreisdiagramms enthält. Ähnlich wie im vorherigen Abschnitt übergeben wir diese Daten an die Variable „chart_data“ in der Vorlage sowie an die Diagrammtypvariable „chart_type“. Dieses Mal verwenden wir jedoch „Kreis“ als Kreisdiagrammtyp.

Als nächstes entwerfen wir die Vorlage und verwenden die ECharts-Bibliothek, um das Diagramm zu rendern. Der Code lautet wie folgt:

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '饼图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: '{{.chart_type}}',
                radius: '45%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
});
</script>

Im Code verwenden wir zunächst {{.chart_data}} und {{.chart_type}}, um die Daten und den Diagrammtyp auszugeben. Anschließend verwenden wir auch bedingte Anweisungen, um zu steuern, ob der Diagrammbereich angezeigt wird.

In den Konfigurationselementen des Diagramms verwenden wir das Array „Daten“ mit einem bestimmten Format, um die Daten des Diagramms zu definieren. Unter diesen wird der Wert verwendet, um die Größe der Daten darzustellen, und der Name wird verwendet, um den Namen der Daten darzustellen. Gleichzeitig können wir auch Attribute wie „label“ und „labelLine“ verwenden, um Beschriftungen festzulegen.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit ECharts und Golang auf einfache Weise schöne statistische Diagramme zeichnen können. Wir haben zunächst ein einfaches Balken- und Kreisdiagramm implementiert und konkrete Codebeispiele gegeben. Anhand dieser Beispiele können wir lernen, wie man ECharts verwendet und es mit dem Golang-Framework kombiniert, um Datenvisualisierungsanforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie ganz einfach schöne statistische Diagramme mit ECharts und Golang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!