Partir de zéro : utiliser ECharts et Golang pour créer de superbes graphiques statistiques-Golang-php.cn

Partir de zéro : utiliser ECharts et Golang pour créer de superbes graphiques statistiques

PHPz

Libérer： 2023-12-17 09:35:36

original

1169 Les gens l'ont consulté

Partir de zéro : utiliser ECharts et Golang pour créer de superbes graphiques statistiques

Partez de zéro : utilisez ECharts et Golang pour créer de superbes graphiques statistiques

À l'ère de la visualisation des données, les graphiques statistiques sont devenus un outil important pour afficher les données. En tant que bibliothèque open source puissante et facile à utiliser, ECharts nous offre une variété de types de graphiques et de styles de graphiques riches. En combinaison avec Golang, un langage de programmation efficace et puissant, nous pouvons facilement créer de superbes graphiques statistiques interactifs.

Cet article vous guidera à partir de zéro pour créer un graphique statistique simple à l'aide d'ECharts et de Golang. Nous utiliserons Golang comme langage backend pour obtenir les données et les transmettre à la bibliothèque ECharts sur le frontend pour générer des graphiques. Commençons !

Tout d'abord, nous devons installer les bibliothèques Golang et ECharts. Si vous n'avez pas encore installé Golang, vous pouvez le télécharger et l'installer depuis le site officiel : https://golang.org/

Ensuite, nous devons installer la bibliothèque ECharts, vous pouvez trouver la méthode d'installation dans la documentation officielle d'ECharts : https://echarts.apache.org/zh/index.html

Après l'installation, nous créons un nouveau projet golang et créons un fichier nommé main.go dans le répertoire du projet. main.go的文件。

第一步，我们需要导入必要的golang包：

package main

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

Copier après la connexion

第二步，我们创建一个简单的数据结构，表示我们的统计数据：

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

Copier après la connexion

第三步，我们创建一个handler函数来处理HTTP请求，并将数据以JSON格式返回给前端：

func handler(w http.ResponseWriter, r *http.Request) {
    data := []Data{
        {Label: "Apple", Value: 10},
        {Label: "Banana", Value: 20},
        {Label: "Orange", Value: 15},
    }

    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(jsonData)
}

Copier après la connexion

第四步，我们创建一个main函数，并启动一个HTTP服务器来监听请求：

func main() {
    http.HandleFunc("/data", handler)
    http.ListenAndServe(":8080", nil)
}

Copier après la connexion

接下来，我们回到ECharts的前端部分。在项目目录下创建一个名为index.html的文件，并在其中加入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        fetch('/data')
            .then(response => response.json())
            .then(data => {
                const chart = echarts.init(document.getElementById('chart'));
                
                const options = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        type: 'bar',
                        data: data.map(item => item.value),
                    }],
                };
                
                chart.setOption(options);
            });
    </script>
</body>
</html>

Copier après la connexion

最后，我们打开终端，进入项目目录并运行go run main.go启动我们的golang服务器。

在浏览器中访问http://localhost:8080

Dans la première étape, nous devons importer les packages golang nécessaires :

rrreee

Dans la deuxième étape, nous créons une structure de données simple pour représenter nos statistiques :

rrreee

Dans la troisième étape, nous créons une fonction de gestionnaire pour gérer Requête HTTP, et renvoyons les données au front-end au format JSON : 🎜rrreee🎜Dans la quatrième étape, nous créons une fonction principale et démarrons un serveur HTTP pour écouter les requêtes : 🎜rrreee🎜Ensuite, nous revenons au front- fin de la partie d'ECharts. Créez un fichier nommé index.html dans le répertoire du projet et ajoutez-y le code suivant : 🎜rrreee🎜Enfin, nous ouvrons le terminal, entrons dans le répertoire du projet et exécutons go run main.go Démarrez notre serveur golang. 🎜🎜Visitez http://localhost:8080 dans votre navigateur, vous verrez une page contenant des graphiques statistiques. Ce graphique présentera nos données, présentées sous forme de graphique à barres. 🎜🎜Grâce à cet exemple simple, nous avons appris à utiliser ECharts et Golang pour créer de superbes graphiques statistiques. Vous pouvez modifier les types de données et de graphiques en fonction de vos propres besoins, et ECharts propose de nombreuses options pour répondre à différents besoins. 🎜🎜J'espère que cet article vous sera utile, et je vous souhaite d'aller toujours plus loin sur le chemin de la data visualisation ! 🎜

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!