ECharts et Golang : conseils et expériences pour créer des graphiques statistiques pratiques-Golang-php.cn

ECharts et Golang : conseils et expériences pour créer des graphiques statistiques pratiques

PHPz

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

original

1179 Les gens l'ont consulté

ECharts和golang: 制作实用的统计图表的技巧与经验

ECharts et golang : Compétences et expérience dans la création de graphiques statistiques pratiques, des exemples de code spécifiques sont nécessaires

Avec la popularité du traitement des données, la visualisation des données est devenue une compétence essentielle dans de nombreux domaines d'application. Et des outils pour réaliser des graphiques ont également vu le jour. ECharts est un outil de visualisation de données open source et Golang est un langage à haute efficacité et à haute concurrence. La combinaison des deux peut créer des graphiques efficaces et pratiques.

Cet article présentera les compétences et l'expérience liées à l'utilisation d'ECharts et de Golang pour créer des graphiques statistiques pratiques et fournira des exemples de code spécifiques.

Tout d'abord, nous devons transmettre les données du backend au frontend. Dans Golang, vous pouvez utiliser le package http pour implémenter des services Web simples. Par exemple, voici un simple serveur Web :

package main

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

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

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {"January", 10},
            {"February", 20},
            {"March", 30},
            {"April", 25},
            {"May", 15},
            {"June", 5},
        }

        jsonData, err := json.Marshal(data)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

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

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

Copier après la connexion

Ensuite, nous utiliserons ECharts sur le front-end pour afficher les données. Tout d'abord, ECharts doit être introduit en HTML :

<!DOCTYPE html>
<html>
<head>
  <title>Chart Example</title>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

Copier après la connexion

Nous avons introduit ECharts dans la balise head et placé un div dans le corps pour héberger le graphique. Dans le même temps, nous avons également introduit un fichier js nommé « chart.js » pour charger des données et dessiner des graphiques.

Voici notre code pour dessiner des graphiques à l'aide d'ECharts :

fetch('/').then(function(response) {
    return response.json();
}).then(function(data) {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'My Chart',
            left: 'center',
        },
        tooltip: {},
        xAxis: {
            data: data.map(function(item) {
                return item.label;
            })
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: data.map(function(item) {
                return item.value;
            })
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});

Copier après la connexion

Le code utilise la fonction fetch pour demander des données et la méthode json() pour analyser les données de réponse dans un objet json. Nous avons ensuite créé une instance ECharts et défini un titre, une info-bulle, des axes X/Y et une série de barres pour le graphique.

Enfin, exécutez le serveur en utilisant golang dans l'application et ouvrez le fichier html dans le navigateur. À ce stade, nous pouvons voir un graphique dessiné à l'aide d'ECharts et de Golang, qui affiche certaines données que nous avons définies sur le backend.

Ce qui précède est un exemple de base d'utilisation d'ECharts et de Golang pour créer des graphiques statistiques pratiques. Si vous avez besoin de créer des graphiques plus complexes, vous pouvez trouver les options de configuration appropriées dans la documentation officielle d'ECharts et utiliser Golang pour gérer les données. Avec des essais et une pratique constants, vous serez en mesure de créer des graphiques à la fois très pratiques et beaux.

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!