Apprenez à utiliser ECharts et Golang pour créer un superbe didacticiel de graphiques statistiques

Apprenez à utiliser ECharts et Golang pour créer un superbe didacticiel de graphiques statistiques

À l'ère d'Internet moderne, la visualisation des données est l'un des moyens importants pour attirer les utilisateurs et afficher des informations. En tant que forme de visualisation de données, les graphiques statistiques peuvent afficher de manière claire et intuitive les tendances et les relations entre les données. Cet article vous apprendra comment utiliser ECharts et Golang pour créer de superbes graphiques statistiques, avec des exemples de code spécifiques.

(1) Introduction à ECharts

ECharts est une bibliothèque de graphiques open source basée sur JavaScript développée par l'équipe front-end de Baidu. Il fournit des types de graphiques riches et des options de configuration flexibles, permettant aux utilisateurs de créer facilement une variété de graphiques statistiques. Les types de graphiques pris en charge par ECharts incluent les graphiques linéaires, les graphiques à barres, les diagrammes circulaires, les graphiques à nuages ​​de points, etc.

(2) Introduction à golang

golang est un langage de programmation open source développé par Google et sorti en 2009. Il est efficace, fiable et concis, et convient au développement d’applications côté serveur hautes performances. Dans ce didacticiel, nous utiliserons Golang pour écrire du code back-end, utiliserons ECharts pour générer des graphiques et afficher des graphiques statistiques via l'interaction des données entre le front-end et le back-end.

(3) Installez ECharts

1. Téléchargez le fichier de bibliothèque ECharts

Vous pouvez télécharger le dernier fichier de bibliothèque ECharts depuis le site officiel d'ECharts (https://echarts.apache.org/). Après la décompression, placez le dossier ECharts dans le répertoire de votre projet.

2. Introduire le fichier de bibliothèque ECharts

Dans le fichier HTML, vous devez introduire le fichier de bibliothèque ECharts via la balise de script. Par exemple :

<script src="echarts.min.js"></script>

(4) Écrivez le code backend de Golang

1. Installez Golang

Tout d'abord, vous devez installer Golang et définir les variables d'environnement. Vous pouvez télécharger le dernier package d'installation de Golang depuis le site officiel de Golang (https://golang.org/) et l'installer conformément à la documentation officielle.

2. Créer un projet golang

Dans votre répertoire de travail, créez un nouveau projet golang.

3. Écrivez le code golang

Dans le fichier go du projet, écrivez le code golang suivant :

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

    http.ListenAndServe(":8080", nil)
}

4. Exécutez le programme golang

Dans la ligne de commande, entrez le répertoire du projet et exécutez la commande suivante pour exécuter le programme golang :

go run main.go

(5) Écrivez du code HTML et JavaScript

1. Créez un fichier HTML et écrivez le contenu suivant dans le fichier :

    


    


    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

2. Ouvrez le navigateur et visitez la page HTML

Ouvrez le HTML fichier dans le navigateur, vous verrez un simple graphique statistique.

Ce qui précède est le didacticiel complet sur la création de superbes graphiques statistiques à l'aide d'ECharts et de Golang. Grâce à ce didacticiel, vous apprendrez à utiliser ECharts et Golang pour créer des graphiques statistiques et réaliser l'affichage et l'interaction des données. J'espère que cela vous aidera dans votre apprentissage et dans le développement de votre projet !

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!