Comment dessiner facilement de superbes graphiques statistiques à l'aide d'ECharts et de Golang

Comment utiliser ECharts et Golang pour dessiner facilement de superbes graphiques statistiques

Avec l'accumulation et l'application continues de données, les graphiques statistiques sont devenus un moyen important d'afficher des données. Dans ce domaine, ECharts est une bibliothèque de graphiques JavaScript open source populaire. Elle est puissante, facile à utiliser et prend en charge un grand nombre de styles et de types de graphiques, elle a donc été largement utilisée dans le développement. Dans le même temps, en tant que langage de programmation efficace, Golang devient de plus en plus populaire dans le développement back-end Web.

Cet article présente principalement comment utiliser ECharts et Golang pour dessiner de superbes graphiques statistiques, et donne des exemples de code spécifiques.

1. Préparation

Avant de développer des graphiques statistiques, nous devons préparer les outils et environnements suivants :

• Environnement Golang
• Framework Beego
• Bibliothèque ECharts

Parmi eux, l'environnement Golang peut être téléchargé et installé via Sur le site officiel, le framework Beego peut être installé via la commande suivante :

go get github.com/astaxie/beego

La bibliothèque ECharts peut être installée via la commande suivante :

npm install echarts --save

2. Dessiner un histogramme

Tout d'abord, nous essayons de dessiner un histogramme simple. Le code est le suivant :

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"
}

Dans le code, nous définissons un contrôleur nommé MainController et implémentons la méthode Get. Parmi eux, nous définissons un tableau nommé data, qui contient les données de l'histogramme. Nous transmettons ensuite ces données à la variable "chart_data" du modèle, ainsi qu'à la variable "chart_type" du type de graphique. Plus précisément, nous avons utilisé « barre » comme type d’histogramme.

Ensuite, nous devons présenter le modèle et utiliser la bibliothèque ECharts pour restituer le graphique. Le code est le suivant :

{{.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>

Dans le code, nous utilisons d'abord {{.chart_data}} et {{.chart_type}} pour afficher les données et le type de graphique afin que nous puissions vérifier l'exactitude des données lors du débogage. Ensuite, nous utilisons des instructions conditionnelles pour déterminer si les données ont été transmises, et la zone du graphique ne sera affichée qu'une fois les données transmises.

Ensuite, nous avons présenté la bibliothèque ECharts et utilisé la méthode echarts.init pour initialiser un élément DOM avec un ID spécifié. Dans cet exemple, nous avons ajouté quelques éléments de configuration de base, tels que le titre, l'info-bulle, la légende, xAxis, yAxis, séries, etc. Parmi eux, xAxis et yAxis définissent respectivement les données de l'axe horizontal et de l'axe vertical, et les séries sont utilisées pour définir les données du graphique.

3. Dessiner des diagrammes circulaires

En plus des graphiques à barres, nous pouvons également utiliser ECharts et Golang pour dessiner d'autres types de graphiques. Ensuite, nous essayons de dessiner un diagramme circulaire. Le code est le suivant :

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"
}

Dans le code, on définit une carte nommée data, qui contient les données du camembert. Semblable à la section précédente, nous transmettons ces données à la variable « chart_data » dans le modèle, ainsi qu'à la variable « chart_type » de type de graphique. Cependant, cette fois, nous utilisons « camembert » comme type de diagramme circulaire.

Ensuite, nous présentons le modèle et utilisons la bibliothèque ECharts pour restituer le graphique. Le code est le suivant :

{{.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>

Dans le code, nous utilisons d'abord {{.chart_data}} et {{.chart_type}} pour afficher les données et le type de graphique. Ensuite, nous utilisons également des instructions conditionnelles pour contrôler si la zone du graphique est affichée.

Dans les éléments de configuration du graphique, nous utilisons le tableau "data" avec un format spécifique pour définir les données du graphique. Parmi eux, la valeur est utilisée pour représenter la taille des données et le nom est utilisé pour représenter le nom des données. Dans le même temps, nous pouvons également utiliser des attributs tels que "label" et "labelLine" pour définir des étiquettes.

4. Résumé

Cet article explique comment utiliser ECharts et Golang pour dessiner facilement de superbes graphiques statistiques. Nous avons d’abord implémenté un simple graphique à barres et un diagramme circulaire, et avons donné des exemples de code spécifiques. Grâce à ces exemples, nous pouvons apprendre à utiliser ECharts et à le combiner avec le framework golang pour répondre aux besoins de visualisation de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!