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

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

PHPz

Release： 2023-12-18 16:37:03

Original

1086 people have browsed it

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

Start from scratch: Use ECharts and golang to make diverse statistical charts

Overview:
Make diverse statistical charts under the needs of modern data analysis and visualization Statistical charts became an important development task. ECharts is an open source chart library based on JavaScript, which provides a variety of chart types and interactive functions to meet various data display needs. As an efficient server programming language, golang can be combined with ECharts to achieve flexible and high-performance data visualization services.

This article will use a specific example to introduce how to use ECharts and golang to create diverse statistical charts from scratch. We will use golang as the back-end framework to interact with the front-end ECharts by providing a data interface, and finally implement a dynamically updated statistical chart.

Step 1: Set up the golang development environment
First, we need to set up the golang development environment locally. You can go to the official website (https://golang.org/dl/) to download the golang installation package suitable for your operating system, and then install and configure it according to the official documentation.

Step 2: Create golang project
In the command line, use the following command to create a new golang project:

mkdir golang-echarts-demo
cd golang-echarts-demo
go mod init github.com/your-username/golang-echarts-demo

Copy after login

Here your-username is you The github username is used to specify the import path of the project.

Step 3: Install golang’s http library
There are many third-party libraries in golang that can be used to handle http requests. Here we use the standard library’s net/http to build a simple http service. In the command line, use the following command to install the http library:

go get -u github.com/gorilla/mux

Copy after login

Step 4: Write golang backend code
In the project root directory, create a file named main.go file, and use the following code to write the golang backend code:

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "github.com/gorilla/mux"
)

type Data struct {
    Labels []string `json:"labels"`
    Values []int    `json:"values"`
}

func GetData(w http.ResponseWriter, r *http.Request) {
    data := Data{
        Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri"},
        Values: []int{120, 200, 150, 80, 300},
    }
    json.NewEncoder(w).Encode(data)
}

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/data", GetData).Methods("GET")
    log.Fatal(http.ListenAndServe(":8000", router))
}

Copy after login

This code defines a structure named Data, which contains the labels and numerical data required for the chart. . The GetData function is used to process the client's request and return a json response containing label and numerical data.

Step 5: Run the golang backend service
In the command line, use the following command to run the golang backend service:

go run main.go

Copy after login

Step 6: Create the front-end page
In the project root directory, create a file named index.html, and use the following code to write the front-end page:

<!DOCTYPE html>
<html>
<head>
    <title>ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: '统计图表'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar'
            }]
        };
        setInterval(function() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    option.xAxis.data = data.labels;
                    option.series[0].data = data.values;
                    chart.setOption(option);
                });
        }, 2000);
    </script>
</body>
</html>

Copy after login

This code uses the JavaScript library provided by ECharts and creates a file named The chart container for chart. By regularly requesting the data interface of the back-end service and setting the returned data to the chart options, dynamically updated statistical charts are implemented.

Step 7: Run the front-end page
In the command line, use the following command to run the front-end page:

python -m http.server

Copy after login

This will start a simple http server locally and serve the front-end page to Browser access.

At this point, we have completed the process of using ECharts and golang to create diverse statistical charts. By using golang to build back-end services, combined with the rich chart types and interactive functions provided by ECharts, we can easily implement flexible and high-performance data visualization services. I hope this article was helpful and I wish you success in your development work in the field of data visualization!

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