Guide pratique ECharts et Golang : tutoriel sur la réalisation de divers graphiques statistiques

Guide pratique ECharts et golang : Tutoriel sur la création de divers graphiques statistiques, nécessitant des exemples de code spécifiques

En tant que leader dans le domaine de la visualisation de données, ECharts est irremplaçable dans de nombreux scénarios. En tant que langage de programmation doté de performances puissantes, Golang présente également certains avantages dans les scénarios Big Data. Cet article expliquera comment utiliser ECharts et Golang pour créer divers graphiques statistiques et fournira des exemples de code spécifiques.

1. Préparation

Avant de commencer, vous devez maîtriser les compétences de base suivantes :

• Syntaxe de base de Golang et utilisation de certaines bibliothèques de base
• Utilisation et configuration de base d'ECharts
• Familié avec HTML, CSS, JS, etc. Bases du front-end

2. Choisissez la source de données

Avant de créer des graphiques statistiques, nous devons déterminer la source de données à utiliser. Ici, nous prenons la lecture de la base de données MySQL comme exemple et utilisons les bibliothèques tierces "database/sql" et "go-sql-driver/mysql" pour réaliser la lecture. L'exemple de code est le suivant :

import (
    "database/sql"
    "fmt"
    _ "github.com/go-sql-driver/mysql"
)

func main() {
    // connect to database server
    db, err := sql.Open("mysql", "user:password@tcp(127.0.0.1:3306)/database_name")
    if err != nil {
        fmt.Println("Failed to connect to database: ", err)
        return
    }
    defer db.Close()

    // execute query
    rows, err := db.Query("SELECT * FROM table_name")
    if err != nil {
        fmt.Println("Failed to execute query: ", err)
        return
    }
    defer rows.Close()

    // process query result
    for rows.Next() {
        var field1 int
        var field2 string
        // read fields from row
        err = rows.Scan(&field1, &field2)
        if err != nil {
            fmt.Println("Failed to read row: ", err)
            continue
        }
        // do something with fields
        fmt.Println(field1, field2)
    }
}

3. Générer des graphiques statistiques

Après avoir obtenu les données, vous pouvez utiliser ECharts pour générer des graphiques statistiques. ECharts propose une variété de types de graphiques, notamment des graphiques à barres, des graphiques linéaires, des diagrammes circulaires, etc. Ici, nous prenons un histogramme comme exemple pour voir comment générer un histogramme simple. L'exemple de code est le suivant :

import (
    "github.com/chenjiandongx/go-echarts/charts"
    "github.com/chenjiandongx/go-echarts/opts"
)

func main() {
    // create a bar chart
    bar := charts.NewBar()

    // set chart title and axes labels
    bar.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{
            Title: "Bar Chart Example",
        }),
        charts.WithXAxisOpts(opts.XAxis{
            Name: "X Axis",
        }),
        charts.WithYAxisOpts(opts.YAxis{
            Name: "Y Axis",
        }),
    )

    // add data series to chart
    bar.AddSeries("Series 1", []opts.BarData{
        {Name: "A", Value: 10},
        {Name: "B", Value: 20},
        {Name: "C", Value: 30},
        {Name: "D", Value: 40},
        {Name: "E", Value: 50},
    })

    // render chart to HTML page
    page := charts.NewPage()
    page.Add(bar)
    page.Render("bar.html")
}

Dans cet exemple, nous utilisons la bibliothèque tierce go-echarts pour générer des histogrammes. Créez d’abord un objet Bar, définissez les étiquettes du titre et des axes, puis ajoutez la série de données et affichez le graphique sur la page HTML.

4. Visualisation des données

Enfin, ouvrez la page HTML générée dans le navigateur pour voir l'effet de l'histogramme. Dans le développement réel, nous devrons peut-être combiner plusieurs graphiques à afficher ou utiliser différentes sources de données pour générer différents graphiques. Ici, nous pouvons utiliser le moteur de modèles pour générer dynamiquement différentes pages HTML. L'exemple de code est le suivant :

import (
    "database/sql"
    "fmt"
    _ "github.com/go-sql-driver/mysql"
    "github.com/gin-gonic/gin"
    "github.com/pkg/errors"
    "net/http"
)

func main() {
    r := gin.Default()
    r.LoadHTMLGlob("templates/*")

    // define route handler
    r.GET("/bar/:table/:x/:y", func(c *gin.Context) {
        table := c.Param("table")
        x := c.Param("x")
        y := c.Param("y")
        data, err := queryData(table, x, y)
        if err != nil {
            c.String(http.StatusInternalServerError, "Failed to query data: "+err.Error())
            return
        }
        bar := charts.NewBar()
        bar.SetGlobalOptions(
            charts.WithTitleOpts(opts.Title{
                Title: fmt.Sprintf("Bar Chart (%s vs %s)", x, y),
            }),
            charts.WithXAxisOpts(opts.XAxis{
                Name: x,
            }),
            charts.WithYAxisOpts(opts.YAxis{
                Name: y,
            }),
        )
        bar.AddSeries(table, data)
        c.HTML(http.StatusOK, "bar.html", gin.H{
            "graph": bar.JSChart(),
        })
    })

    // listen on port 8080
    r.Run(":8080")
}

// query data from MySQL database
func queryData(table, x, y string) ([]opts.BarData, error) {
    db, err := sql.Open("mysql", "user:password@tcp(127.0.0.1:3306)/database_name")
    if err != nil {
        return nil, errors.Wrap(err, "Failed to connect to database")
    }
    defer db.Close()
    rows, err := db.Query(fmt.Sprintf("SELECT %s, %s FROM %s", x, y, table))
    if err != nil {
        return nil, errors.Wrap(err, "Failed to execute query")
    }
    defer rows.Close()
    var result []opts.BarData
    for rows.Next() {
        var field1 string
        var field2 float64
        err = rows.Scan(&field1, &field2)
        if err != nil {
            return nil, errors.Wrap(err, "Failed to read row")
        }
        result = append(result, opts.BarData{Name: field1, Value: field2})
    }
    return result, nil
}

Dans cet exemple, nous utilisons le framework Web gin pour définir les fonctions de routage et de traitement HTTP. La route "/bar/:table/:x/:y" est définie et différents paramètres peuvent être transmis pour générer dynamiquement différentes pages HTML. Dans la fonction de traitement, les données sont d'abord lues à partir de la base de données MySQL, puis ECharts est utilisé pour générer un histogramme, et enfin le graphique est intégré dans le modèle HTML et renvoyé au navigateur client.

5. Résumé

Grâce à l'étude de cet article, nous avons appris à utiliser ECharts et Golang pour générer divers graphiques statistiques. Qu'il s'agisse de types de graphiques courants tels que des graphiques à barres, des graphiques linéaires ou des diagrammes circulaires, nous pouvons procéder de cette façon. De plus, nous pouvons également utiliser des moteurs de modèles pour générer dynamiquement différentes pages HTML afin d'améliorer la flexibilité et l'applicabilité de la visualisation des données. Bien sûr, il y a plus de détails et de techniques auxquels il faut prêter attention dans le développement réel, et plus de pratique et d'exploration sont nécessaires.

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!