Starting from scratch: using ECharts and golang to create beautiful statistical charts-Golang-php.cn

Starting from scratch: using ECharts and golang to create beautiful statistical charts

PHPz

Release： 2023-12-17 09:35:36

Original

1194 people have browsed it

Starting from scratch: using ECharts and golang to create beautiful statistical charts

Start from scratch: Use ECharts and golang to create beautiful statistical charts

In the era of data visualization, statistical charts have become an important tool for displaying data. As a powerful and easy-to-use open source library, ECharts provides us with a variety of chart types and rich chart styles. Combined with golang, an efficient and powerful programming language, we can easily create beautiful and interactive statistical charts.

This article will take you from scratch to create a simple statistical chart using ECharts and golang. We will use golang as the backend language to get the data and pass it to the ECharts library on the frontend to generate charts. let's start!

First, we need to install golang and ECharts libraries. If you haven't installed golang yet, you can download and install it from the official website: https://golang.org/

Next, we need to install the ECharts library, you can find the installation method in the official documentation of ECharts ：https://echarts.apache.org/zh/index.html

After installation, we create a new golang project and create a file named main.go## in the project directory #document.

In the first step, we need to import the necessary golang packages:

package main

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

Copy after login

In the second step, we create a simple data structure to represent our statistical data:

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

Copy after login

The third step, we create a handler function to handle HTTP requests and return the data to the front end in JSON format:

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

Copy after login

The fourth step, we create a main function and start an HTTP server to listen for requests:

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

Copy after login

Next, we return to the front-end part of ECharts. Create a file named

index.html in the project directory and add the following code to it:

<!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>

Copy after login

Finally, we open the terminal, enter the project directory and run

go run main.goStart our golang server.

Visit

http://localhost:8080 in your browser, you will see a page containing statistical charts. This chart will showcase our data, presented as a bar chart.

Through this simple example, we learned how to use ECharts and golang to create beautiful statistical charts. You can modify the data and chart types according to your own needs, and ECharts provides numerous options to meet different needs.

I hope this article is helpful to you, and I wish you go further and further on the road of data visualization!

The above is the detailed content of Starting from scratch: using ECharts and golang to create beautiful statistical charts. For more information, please follow other related articles on the PHP Chinese website!