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
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1666
14
1426
52
1328
25
1273
29
1254
24
How to safely read and write files using Golang?
Jun 06, 2024 pm 05:14 PM
Reading and writing files safely in Go is crucial. Guidelines include: Checking file permissions Closing files using defer Validating file paths Using context timeouts Following these guidelines ensures the security of your data and the robustness of your application.
How to configure connection pool for Golang database connection?
Jun 06, 2024 am 11:21 AM
How to configure connection pooling for Go database connections? Use the DB type in the database/sql package to create a database connection; set MaxOpenConns to control the maximum number of concurrent connections; set MaxIdleConns to set the maximum number of idle connections; set ConnMaxLifetime to control the maximum life cycle of the connection.
How to save JSON data to database in Golang?
Jun 06, 2024 am 11:24 AM
JSON data can be saved into a MySQL database by using the gjson library or the json.Unmarshal function. The gjson library provides convenience methods to parse JSON fields, and the json.Unmarshal function requires a target type pointer to unmarshal JSON data. Both methods require preparing SQL statements and performing insert operations to persist the data into the database.
Golang framework vs. Go framework: Comparison of internal architecture and external features
Jun 06, 2024 pm 12:37 PM
The difference between the GoLang framework and the Go framework is reflected in the internal architecture and external features. The GoLang framework is based on the Go standard library and extends its functionality, while the Go framework consists of independent libraries to achieve specific purposes. The GoLang framework is more flexible and the Go framework is easier to use. The GoLang framework has a slight advantage in performance, and the Go framework is more scalable. Case: gin-gonic (Go framework) is used to build REST API, while Echo (GoLang framework) is used to build web applications.
Transforming from front-end to back-end development, is it more promising to learn Java or Golang?
Apr 02, 2025 am 09:12 AM
Backend learning path: The exploration journey from front-end to back-end As a back-end beginner who transforms from front-end development, you already have the foundation of nodejs,...
Golang framework development practical tutorial: FAQs
Jun 06, 2024 am 11:02 AM
Go framework development FAQ: Framework selection: Depends on application requirements and developer preferences, such as Gin (API), Echo (extensible), Beego (ORM), Iris (performance). Installation and use: Use the gomod command to install, import the framework and use it. Database interaction: Use ORM libraries, such as gorm, to establish database connections and operations. Authentication and authorization: Use session management and authentication middleware such as gin-contrib/sessions. Practical case: Use the Gin framework to build a simple blog API that provides POST, GET and other functions.
Which libraries in Go are developed by large companies or provided by well-known open source projects?
Apr 02, 2025 pm 04:12 PM
Which libraries in Go are developed by large companies or well-known open source projects? When programming in Go, developers often encounter some common needs, ...
Golang's Purpose: Building Efficient and Scalable Systems
Apr 09, 2025 pm 05:17 PM
Go language performs well in building efficient and scalable systems. Its advantages include: 1. High performance: compiled into machine code, fast running speed; 2. Concurrent programming: simplify multitasking through goroutines and channels; 3. Simplicity: concise syntax, reducing learning and maintenance costs; 4. Cross-platform: supports cross-platform compilation, easy deployment.
