ECharts and golang practical guide: tutorial on making diverse statistical charts

ECharts and golang practical guide: Tutorial on making diverse statistical charts, requiring specific code examples

As a leader in the field of data visualization, ECharts can be used in many scenarios There is no substitute. As a programming language with powerful performance, golang also has certain advantages in big data scenarios. This article will introduce how to use ECharts and golang to create diverse statistical charts, and provide specific code examples.

1. Preparation

Before you start, you need to master the following basic skills:

• Golang’s basic syntax and some basic libraries Use
• Basic usage and configuration of ECharts
• Familiar with front-end basics such as HTML, CSS, JS, etc.

2. Select data source

Before making statistical charts, we need to first determine the data source to be used. Here, we take reading the MySQL database as an example, and use the third-party libraries "database/sql" and "go-sql-driver/mysql" to achieve reading. The sample code is as follows:

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. Generate statistical charts

After obtaining the data, you can use ECharts to generate statistical charts. ECharts provides a variety of chart types, including bar charts, line charts, pie charts, and more. Here we take a histogram as an example to see how to generate a simple histogram. The sample code is as follows:

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

In this example, we use the third-party library go-echarts to generate histograms. First create a Bar object, set the title and axis labels, then add the data series, and render the chart to the HTML page.

4. Data Visualization

Finally open the generated HTML page in the browser to see the effect of the histogram. In actual development, we may need to combine multiple charts for display, or use different data sources to generate different charts. Here, we can use the template engine to dynamically generate different HTML pages. The sample code is as follows:

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
}

In this example, we use the gin web framework to define HTTP routing and processing functions. The route "/bar/:table/:x/:y" is defined, and different parameters can be passed in to dynamically generate different HTML pages. In the processing function, the data is first read from the MySQL database, then ECharts is used to generate a histogram, and finally the chart is embedded in the HTML template and returned to the client browser.

5. Summary

Through the study of this article, we have learned how to use ECharts and golang to generate diverse statistical charts. Whether it is common chart types such as bar charts, line charts, or pie charts, we can do it this way. In addition, we can also use template engines to dynamically generate different HTML pages to improve the flexibility and applicability of data visualization. Of course, there are more details and techniques that need to be paid attention to in actual development, and more practice and exploration are required.

The above is the detailed content of ECharts and golang practical guide: tutorial on making diverse statistical charts. For more information, please follow other related articles on the PHP Chinese website!