Learn to use ECharts and golang to create unique statistical charts tutorial-Golang-php.cn

Learn to use ECharts and golang to create unique statistical charts tutorial

WBOY

Release： 2023-12-17 08:02:47

Original

1223 people have browsed it

Learn to use ECharts and golang to create unique statistical charts tutorial

Learn to use ECharts and golang to create unique statistical charts tutorial, you need specific code examples

Introduction
With the rise of big data and data visualization, statistical charts It has become an important tool for data display and analysis. In actual projects, how to use code to generate various unique statistical charts has become the focus of developers. This article will introduce how to use ECharts and golang to create unique statistical charts, and provide specific code examples.

1. Introduction to ECharts
ECharts is an open source project of Baidu. It is a data visualization chart library written in pure JavaScript. ECharts provides a wealth of chart types and interaction methods, is powerful and easy to use. It supports responsive design and can be displayed well on different devices. ECharts also provides a rich extension mechanism to easily customize and expand your own needs.

2. Introduction to golang
Golang is an open source programming language that focuses on simplicity, efficiency and concurrency performance. Golang is suitable for building high-performance network applications and distributed systems. In this tutorial, we will use golang as the backend language responsible for generating the data required by ECharts.

3. Preparation work
First, we need to install the development environment of ECharts and golang. The official website of ECharts (https://echarts.apache.org/) provides detailed installation documentation, and we can install it according to the documentation. Golang's official website (https://golang.org/) also provides corresponding installation guides, and we can install them as needed.

4. Integration of ECharts and golang

Create a basic ECharts page
First, we create a basic ECharts page to display charts. Create a new file named index.html, and then write the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts图表</title>
    <script src="https://echarts.apache.org/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        
        // 在这里编写图表的配置和数据
        
        chart.setOption({
            // 在这里设置图表的配置和数据
        });
    </script>
</body>
</html>

Copy after login

Use golang to generate statistical data
Next, we use golang to generate statistical data for display . Create a file named main.go, and then write the following code:

package main

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

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

func handler(w http.ResponseWriter, r *http.Request) {
    data := map[string]interface{}{
        "categories": []string{"类别1", "类别2", "类别3", "类别4", "类别5"},
        "series": []map[string]interface{}{
            {
                "name": "系列1",
                "type": "bar",
                "data": []float64{100, 200, 300, 400, 500},
            },
            {
                "name": "系列2",
                "type": "bar",
                "data": []float64{200, 300, 400, 500, 600},
            },
        },
    }

    bytes, err := json.Marshal(data)
    if err != nil {
        fmt.Println("错误:", err)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(bytes)
}

Copy after login

Send data to ECharts page
In index.html, we need to use ajax technology from the golang server Get the data and pass the data to ECharts chart. Add the following code in the script tag:

<script>
    var chart = echarts.init(document.getElementById('chart'));
    
    // 发送ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data');
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            
            chart.setOption({
                xAxis: {
                    type: 'category',
                    data: data.categories,
                },
                yAxis: {
                    type: 'value',
                },
                series: data.series,
            });
        }
    };
    xhr.send();
</script>

Copy after login

5. Running and debugging

Start the golang server
In the command line, enter where main.go is located directory, and then run the following command to start the golang server:

go run main.go

Copy after login

Open the ECharts page in the browser
Open the index.html page in the browser (for example http://localhost: 8080/index.html), you can see the generated statistical chart.

Conclusion
This tutorial introduces how to use ECharts and golang to create unique statistical charts, and provides specific code examples. By studying this tutorial, I believe you can use ECharts and golang more flexibly to create various exquisite statistical charts. Hope this tutorial is helpful to everyone.

The above is the detailed content of Learn to use ECharts and golang to create unique statistical charts tutorial. For more information, please follow other related articles on the PHP Chinese website!