Maison > Article > développement back-end > ECharts et Golang en action : Tutoriel pour créer de superbes graphiques statistiques

ECharts et Golang en action : Tutoriel pour créer de superbes graphiques statistiques

WBOYoriginal: 2023-12-18 12:52:171267parcourir

ECharts和golang实战: 制作精美的统计图表教程

ECharts et Golang en action : tutoriel pour créer de superbes graphiques statistiques

Introduction
La visualisation des données est un élément indispensable des applications Web modernes. ECharts est une bibliothèque de graphiques open source puissante et flexible, tandis que Golang est un langage de programmation puissant et rapide. La combinaison des deux peut obtenir de superbes effets de graphiques statistiques dans les applications Web. Cet article vous expliquera comment utiliser ECharts et Golang pour créer de superbes graphiques statistiques et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons installer le logiciel correspondant et charger les bibliothèques nécessaires.

Installez Golang
Tout d'abord, vous devez télécharger et installer Golang. Vous pouvez visiter le site officiel de Golang (https://golang.org/) pour télécharger la dernière version de golang et l'installer selon le guide officiel.
Installer ECharts
ECharts peut être installé via npm. Exécutez la commande suivante dans le terminal pour installer ECharts.

npm install echarts --save

Créer un projet golang
Créez un nouveau projet golang et initialisez un nouveau module golang à l'aide des commandes suivantes.

go mod init your_project_name

Ensuite, utilisez la commande suivante pour installer les bibliothèques nécessaires.

go get github.com/gin-gonic/gin

2. Créer un serveur Web
L'utilisation du framework gin dans golang peut facilement créer un serveur Web.

Créez un fichier nommé main.go dans votre projet golang et ajoutez le code suivant au fichier.

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    router := gin.Default()

    router.LoadHTMLGlob("templates/*")

    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{})
    })

    router.Run(":8080")
}

Créez un fichier nommé index.html dans le dossier des modèles et ajoutez le code suivant.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts and golang</title>
    <script src="/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写ECharts的代码
    </script>
</body>
</html>

3. Écrivez le code ECharts
Dans le fichier index.html, vous pouvez écrire du code ECharts pour créer divers graphiques statistiques.

Tout d’abord, ajoutez un élément div à l’intérieur de la balise body et définissez la largeur et la hauteur.

Ensuite, ajoutez le code ECharts dans la balise script.

Supposons que nous voulions dessiner un histogramme, nous pouvons utiliser le code suivant.

<script>
    var chart = echarts.init(document.getElementById('chart'));

    var option = {
        title: {
            text: '柱状图'
        },
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
        }]
    };

    chart.setOption(option);
</script>

Ce code crée un graphique à barres avec l'axe des x montrant la classification des données et l'axe des y montrant le volume des ventes. En définissant l'attribut data de la série, vous pouvez définir les données spécifiques de l'histogramme.

En fonction de vos besoins, vous pouvez écrire différents types de codes de graphiques et les ajouter au fichier index.html.

4. Exécutez l'application Web
Dans le terminal, utilisez la commande suivante pour exécuter votre application Golang.

go run main.go

Ensuite, ouvrez votre navigateur et visitez http://localhost:8080.

Vous verrez une page Web affichant un histogramme.

En écrivant le code ECharts correspondant, vous pouvez créer différents types de graphiques statistiques et les afficher dans des applications Web.

Conclusion
En combinant ECharts et golang, nous pouvons facilement créer de magnifiques graphiques statistiques. Cet article vous explique comment créer un serveur Web et utiliser ECharts pour écrire du code de graphique statistique dans une application Web. J'espère que cet article pourra vous aider à approfondir votre compréhension d'ECharts et de Golang, et à ajouter des effets de visualisation de données plus vifs et intéressants à vos applications Web.

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!

golang gin echarts html npm http https

Déclaration：

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

Article précédent：Comment utiliser ECharts et Golang pour créer des graphiques statistiques de niveau professionnelArticle suivant：Comment utiliser ECharts et Golang pour créer des graphiques statistiques de niveau professionnel

Articles Liés

Voir plus