Home > Article > Backend Development > Starting from scratch: using ECharts and golang to create beautiful statistical charts
Starting from scratch: using ECharts and golang to create beautiful statistical charts
- PHPzOriginal
- 2023-12-17 09:35:361163browse
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.
package main
import (
"encoding/json"
"fmt"
"net/http"
) 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"`
} 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)
}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)
}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>Finally, we open the terminal, enter the project directory and run go run main.goStart our golang server.
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.
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!