ECharts et Golang en action : Tutoriel pour créer de superbes graphiques statistiques-Golang-php.cn

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

WBOY

Libérer： 2023-12-18 12:52:17

original

1199 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

go get github.com/gin-gonic/gin

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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