Partez de zéro : utilisez ECharts et Golang pour créer divers graphiques statistiques
Vue d'ensemble :
Avec les besoins de l'analyse et de la visualisation modernes des données, la création de divers graphiques statistiques est devenue une tâche de développement importante. ECharts est une bibliothèque de graphiques open source basée sur JavaScript, qui fournit une variété de types de graphiques et de fonctions interactives pour répondre à divers besoins d'affichage de données. En tant que langage de programmation serveur efficace, golang peut être combiné avec ECharts pour obtenir des services de visualisation de données flexibles et performants.
Cet article utilisera un exemple spécifique pour présenter comment utiliser ECharts et Golang pour créer divers graphiques statistiques à partir de zéro. Nous utiliserons Golang comme framework back-end pour interagir avec les ECharts front-end en fournissant une interface de données, et enfin implémenter un graphique statistique mis à jour dynamiquement.
Étape 1 : Configurer l'environnement de développement Golang
Tout d'abord, nous devons configurer l'environnement de développement Golang localement. Vous pouvez accéder au site officiel (https://golang.org/dl/) pour télécharger le package d'installation de Golang adapté à votre système d'exploitation, puis l'installer et le configurer conformément à la documentation officielle.
Étape 2 : Créer un projet golang
Dans la ligne de commande, utilisez la commande suivante pour créer un nouveau projet golang :
mkdir golang-echarts-demo
cd golang-echarts-demo
go mod init github.com/your-username/golang-echarts-demo
Copier après la connexion
Ici votre nom d'utilisateur est votre nom d'utilisateur github, utilisé pour spécifier le projet chemin d'importation. your-username是你的github用户名，用于指定项目的导入路径。
步骤三：安装golang的http库
golang中有很多第三方库可以用于处理http请求，这里我们使用标准库的net/http来搭建一个简单的http服务。在命令行中，使用以下命令安装http库：
go get -u github.com/gorilla/mux
Copier après la connexion
步骤四：编写golang后端代码
在项目根目录下，创建一个名为main.go的文件，并使用以下代码编写golang后端代码：
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))
}Copier après la connexion
这段代码定义了一个名为Data的结构体，结构体中包含了图表需要的标签和数值数据。GetData函数用于处理客户端的请求，并返回一个包含标签和数值数据的json响应。
步骤五：运行golang后端服务
在命令行中，使用以下命令运行golang后端服务：
go run main.go
Copier après la connexion
步骤六：创建前端页面
在项目根目录下，创建一个名为index.html的文件，并使用以下代码编写前端页面：
<!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>Copier après la connexion
这段代码使用了ECharts提供的JavaScript库，并创建了一个名为chart
Étape 3 : Installer la bibliothèque http de golang
Il existe de nombreuses bibliothèques tierces dans golang qui peuvent être utilisées pour gérer les requêtes http. Ici, nous utilisons le net/http de la bibliothèque standard pour créer un service http simple. . Dans la ligne de commande, utilisez la commande suivante pour installer la bibliothèque http :
python -m http.server
Copier après la connexion
Étape 4 : Écrivez le code backend golang
Dans le répertoire racine du projet, créez un fichier nommé main.go et utilisez le Code suivant d'écriture du code backend golang :
rrreee
Ce code définit une structure nommée Data, qui contient les étiquettes et les données numériques requises pour le graphique. La fonction GetData est utilisée pour traiter la demande du client et renvoyer une réponse json contenant une balise et des données numériques.
🎜Cinquième étape : Exécuter le service backend golang🎜Dans la ligne de commande, utilisez la commande suivante pour exécuter le service backend golang :🎜rrreee🎜Étape six : Créez la page frontale🎜Dans le répertoire racine du projet, créez un fichier nommé
index. html et utilisez le code suivant pour écrire la page frontale : 🎜rrreee🎜Ce code utilise la bibliothèque JavaScript fournie par ECharts et crée un conteneur de graphiques nommé
chart. En demandant régulièrement l'interface de données du service back-end et en définissant les données renvoyées sur les options de graphique, des graphiques statistiques mis à jour dynamiquement sont implémentés. 🎜🎜Étape 7 : Exécuter la page frontale 🎜Dans la ligne de commande, utilisez la commande suivante pour exécuter la page frontale : 🎜rrreee🎜Cela démarrera un simple serveur http localement et fournira la page frontale pour l'accès au navigateur . 🎜🎜À ce stade, nous avons terminé le processus d'utilisation d'ECharts et de Golang pour créer divers graphiques statistiques. En utilisant Golang pour créer des services back-end, combinés aux riches types de graphiques et aux fonctions interactives fournies par ECharts, nous pouvons facilement mettre en œuvre des services de visualisation de données flexibles et performants. J'espère que cet article vous a été utile et je vous souhaite du succès dans votre travail de développement dans le domaine de la visualisation de données ! 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
