Home >Backend Development >Golang >Starting from scratch: using ECharts and golang to create diverse statistical charts

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

PHPzOriginal: 2023-12-18 16:37:031135browse

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

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

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

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

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>

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

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!

JavaScript golang json echarts html 结构体接口 github 数据分析 http https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ECharts and golang skills revealed: secrets for making professional-level statistical chartsNext article：ECharts and golang skills revealed: secrets for making professional-level statistical charts

See more

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

Related articles