Maison développement back-end Golang Comment dessiner facilement de superbes graphiques statistiques à l'aide d'ECharts et de Golang

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

Dec 18, 2023 pm 02:39 PM
golang echarts 统计图表

Comment dessiner facilement de superbes graphiques statistiques à laide dECharts 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
Copier après la connexion

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

npm install echarts --save
Copier après la connexion
  1. 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"
}
Copier après la connexion

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>
Copier après la connexion

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.

  1. 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"
}
Copier après la connexion

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>
Copier après la connexion

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.

  1. 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment lire et écrire des fichiers en toute sécurité avec Golang ? Comment lire et écrire des fichiers en toute sécurité avec Golang ? Jun 06, 2024 pm 05:14 PM

Lire et écrire des fichiers en toute sécurité dans Go est crucial. Les directives incluent : Vérification des autorisations de fichiers Fermeture de fichiers à l'aide de reports Validation des chemins de fichiers Utilisation de délais d'attente contextuels Le respect de ces directives garantit la sécurité de vos données et la robustesse de vos applications.

Comment configurer le pool de connexions pour la connexion à la base de données Golang ? Comment configurer le pool de connexions pour la connexion à la base de données Golang ? Jun 06, 2024 am 11:21 AM

Comment configurer le pool de connexions pour les connexions à la base de données Go ? Utilisez le type DB dans le package base de données/sql pour créer une connexion à la base de données ; définissez MaxOpenConns pour contrôler le nombre maximum de connexions simultanées ; définissez MaxIdleConns pour définir le nombre maximum de connexions inactives ; définissez ConnMaxLifetime pour contrôler le cycle de vie maximum de la connexion ;

Golang Framework vs Go Framework : comparaison de l'architecture interne et des fonctionnalités externes Golang Framework vs Go Framework : comparaison de l'architecture interne et des fonctionnalités externes Jun 06, 2024 pm 12:37 PM

La différence entre le framework GoLang et le framework Go se reflète dans l'architecture interne et les fonctionnalités externes. Le framework GoLang est basé sur la bibliothèque standard Go et étend ses fonctionnalités, tandis que le framework Go se compose de bibliothèques indépendantes pour atteindre des objectifs spécifiques. Le framework GoLang est plus flexible et le framework Go est plus facile à utiliser. Le framework GoLang présente un léger avantage en termes de performances et le framework Go est plus évolutif. Cas : gin-gonic (framework Go) est utilisé pour créer l'API REST, tandis qu'Echo (framework GoLang) est utilisé pour créer des applications Web.

Comment enregistrer les données JSON dans la base de données dans Golang ? Comment enregistrer les données JSON dans la base de données dans Golang ? Jun 06, 2024 am 11:24 AM

Les données JSON peuvent être enregistrées dans une base de données MySQL à l'aide de la bibliothèque gjson ou de la fonction json.Unmarshal. La bibliothèque gjson fournit des méthodes pratiques pour analyser les champs JSON, et la fonction json.Unmarshal nécessite un pointeur de type cible pour désorganiser les données JSON. Les deux méthodes nécessitent la préparation d'instructions SQL et l'exécution d'opérations d'insertion pour conserver les données dans la base de données.

Comment trouver la première sous-chaîne correspondant à une expression régulière Golang ? Comment trouver la première sous-chaîne correspondant à une expression régulière Golang ? Jun 06, 2024 am 10:51 AM

La fonction FindStringSubmatch recherche la première sous-chaîne correspondant à une expression régulière : la fonction renvoie une tranche contenant la sous-chaîne correspondante, le premier élément étant la chaîne entière correspondante et les éléments suivants étant des sous-chaînes individuelles. Exemple de code : regexp.FindStringSubmatch(text,pattern) renvoie une tranche de sous-chaînes correspondantes. Cas pratique : Il peut être utilisé pour faire correspondre le nom de domaine dans l'adresse email, par exemple : email:="user@example.com", pattern:=@([^\s]+)$ pour obtenir la correspondance du nom de domaine [1].

Transformant du développement frontal au développement back-end, est-il plus prometteur d'apprendre Java ou Golang? Transformant du développement frontal au développement back-end, est-il plus prometteur d'apprendre Java ou Golang? Apr 02, 2025 am 09:12 AM

Chemin d'apprentissage du backend: le parcours d'exploration du front-end à l'arrière-end en tant que débutant back-end qui se transforme du développement frontal, vous avez déjà la base de Nodejs, ...

Comment utiliser un fuseau horaire prédéfini avec Golang ? Comment utiliser un fuseau horaire prédéfini avec Golang ? Jun 06, 2024 pm 01:02 PM

L'utilisation de fuseaux horaires prédéfinis dans Go comprend les étapes suivantes : Importez le package « time ». Chargez un fuseau horaire spécifique via la fonction LoadLocation. Utilisez le fuseau horaire chargé dans des opérations telles que la création d'objets Time, l'analyse de chaînes horaires et l'exécution de conversions de date et d'heure. Comparez les dates en utilisant différents fuseaux horaires pour illustrer l'application de la fonctionnalité de fuseau horaire prédéfini.

Tutoriel pratique de développement du framework Golang : FAQ Tutoriel pratique de développement du framework Golang : FAQ Jun 06, 2024 am 11:02 AM

FAQ sur le développement du framework Go : Sélection du framework : Dépend des exigences de l'application et des préférences du développeur, telles que Gin (API), Echo (extensible), Beego (ORM), Iris (performance). Installation et utilisation : Utilisez la commande gomod pour installer, importer le framework et l'utiliser. Interaction avec la base de données : utilisez les bibliothèques ORM, telles que gorm, pour établir des connexions et des opérations avec la base de données. Authentification et autorisation : utilisez un middleware de gestion de session et d'authentification tel que gin-contrib/sessions. Cas pratique : utilisez le framework Gin pour créer une API de blog simple qui fournit des fonctions POST, GET et autres.

See all articles