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

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

In the modern Internet era, data visualization is one of the important means to attract users and display information. As a form of data visualization, statistical charts can clearly and intuitively display the trends and relationships of data. This article will teach you how to use ECharts and golang to create stunning statistical charts, with specific code examples.

(1) Introduction to ECharts

ECharts is a JavaScript-based open source chart library developed by Baidu’s front-end team. It provides rich chart types and flexible configuration options, allowing users to easily create a variety of statistical charts. Chart types supported by ECharts include line charts, bar charts, pie charts, scatter charts, etc.

(2) Introduction to golang

Golang is an open source programming language developed by Google and released in 2009. It is efficient, reliable and concise, suitable for developing high-performance server-side applications. In this tutorial, we will use golang to write back-end code, use ECharts to generate charts, and display statistical charts through data interaction between the front and back ends.

(3) Install ECharts

1. Download the ECharts library file

You can download it from the ECharts official website (https://echarts.apache.org/) Download the latest ECharts library files. After unzipping, place the ECharts folder in your project directory.

2. Introduce the ECharts library file

In the HTML file, you need to introduce the ECharts library file through the script tag. For example:

<script src="echarts.min.js"></script>

(4) Write golang backend code

1. Install golang

First, you need to install golang and set the environment variables. You can download the latest golang installation package from the golang official website (https://golang.org/) and install it according to the official documentation.

2. Create golang project

In your working directory, create a new golang project.

3. Write golang code

In the go file of the project, write the following golang code:

package main

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

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

    http.ListenAndServe(":8080", nil)
}

4. Run the golang program

In the command line, enter the project directory and execute the following command to run the golang program:

go run main.go

(5) Write HTML and JavaScript code

1. Create an HTML file and write the following content in the file:

    



    


    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

2. Open the browser and visit the HTML page

Open the HTML file in the browser and you will See a simple statistical chart.

The above is the entire tutorial on using ECharts and golang to create stunning statistical charts. Through this tutorial, you will learn how to use ECharts and golang to create statistical charts and realize data display and interaction. Hope this helps with your studies and project development!

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