Backend DevelopmentGolangStarting 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!
go语言有没有缩进Dec 01, 2022 pm 06:54 PMgo语言有缩进。在go语言中，缩进直接使用gofmt工具格式化即可（gofmt使用tab进行缩进）；gofmt工具会以标准样式的缩进和垂直对齐方式对源代码进行格式化，甚至必要情况下注释也会重新格式化。
go语言为什么叫goNov 28, 2022 pm 06:19 PMgo语言叫go的原因：想表达这门语言的运行速度、开发速度、学习速度（develop）都像gopher一样快。gopher是一种生活在加拿大的小动物，go的吉祥物就是这个小动物，它的中文名叫做囊地鼠，它们最大的特点就是挖洞速度特别快，当然可能不止是挖洞啦。
聊聊Golang中的几种常用基本数据类型Jun 30, 2022 am 11:34 AM本篇文章带大家了解一下golang 的几种常用的基本数据类型，如整型，浮点型，字符，字符串，布尔型等，并介绍了一些常用的类型转换操作。
tidb是go语言么Dec 02, 2022 pm 06:24 PM是，TiDB采用go语言编写。TiDB是一个分布式NewSQL数据库；它支持水平弹性扩展、ACID事务、标准SQL、MySQL语法和MySQL协议，具有数据强一致的高可用特性。TiDB架构中的PD储存了集群的元信息，如key在哪个TiKV节点；PD还负责集群的负载均衡以及数据分片等。PD通过内嵌etcd来支持数据分布和容错；PD采用go语言编写。
go语言是否需要编译Dec 01, 2022 pm 07:06 PMgo语言需要编译。Go语言是编译型的静态语言，是一门需要编译才能运行的编程语言，也就说Go语言程序在运行之前需要通过编译器生成二进制机器码（二进制的可执行文件），随后二进制文件才能在目标机器上运行。
聊聊Golang自带的HttpClient超时机制Nov 18, 2022 pm 08:25 PM在写 Go 的过程中经常对比这两种语言的特性，踩了不少坑，也发现了不少有意思的地方，下面本篇就来聊聊 Go 自带的 HttpClient 的超时机制，希望对大家有所帮助。
golang map怎么删除元素Dec 08, 2022 pm 06:26 PM删除map元素的两种方法：1、使用delete()函数从map中删除指定键值对，语法“delete(map, 键名)”；2、重新创建一个新的map对象，可以清空map中的所有元素，语法“var mapname map[keytype]valuetype”。
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
Dreamweaver CS6
Visual web development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
