Apprenez à utiliser ECharts et Golang pour créer de superbes graphiques statistiques
Avec la croissance continue des données et le développement de la technologie, la visualisation des données est devenue un moyen important de transmettre des informations et d'afficher des résultats. La conception et la présentation de graphiques statistiques de données nécessitent non seulement des effets d'affichage beaux et intuitifs, mais nécessitent également un haut degré d'interactivité et de flexibilité. Cet article expliquera comment utiliser ECharts et Golang, deux outils puissants, pour obtenir des graphiques statistiques époustouflants.
ECharts est une bibliothèque de visualisation de données basée sur JavaScript et open source par Baidu. Il propose de riches types de visualisation de données et prend en charge plusieurs plates-formes et navigateurs. Grâce à ECharts, nous pouvons facilement dessiner diverses formes de graphiques, tels que des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. Dans le même temps, ECharts dispose également de puissantes capacités interactives, qui peuvent réaliser une interaction entre les utilisateurs et les graphiques via l'interaction de la souris, la liaison des composants du graphique, etc.
Golang est un langage de programmation développé par Google, efficace, simple et sûr. Grâce à Golang, nous pouvons créer rapidement des applications Web hautes performances et les combiner avec ECharts pour réaliser un processus complet d'acquisition, de traitement et d'affichage de données.
Ensuite, nous utiliserons un cas pratique pour démontrer comment utiliser ECharts et Golang pour créer un superbe graphique statistique.
Tout d'abord, considérons une exigence : supposons que nous souhaitions compter les ventes mensuelles d'une certaine région et les afficher sous la forme d'un graphique linéaire. Nous pouvons obtenir des données de ventes mensuelles via Golang et tracer le graphique linéaire correspondant via ECharts.
Tout d'abord, dans Golang, nous devons utiliser une requête HTTP pour obtenir les données de ventes. Vous pouvez utiliser la célèbre bibliothèque de requêtes HTTP "gorilla/mux".
package main
import (
"encoding/json"
"log"
"net/http"
"github.com/gorilla/mux"
)
type Sale struct {
Month string `json:"month"`
Amount float64 `json:"amount"`
}
func main() {
r := mux.NewRouter()
r.HandleFunc("/sales", getSales).Methods("GET")
log.Fatal(http.ListenAndServe(":8000", r))
}
func getSales(w http.ResponseWriter, r *http.Request) {
sales := []Sale{
{Month: "Jan", Amount: 1000.00},
{Month: "Feb", Amount: 1500.00},
{Month: "Mar", Amount: 2000.00},
// 其他月份的销售额数据
}
json.NewEncoder(w).Encode(sales)
}Copier après la connexion
Le code ci-dessus utilise la bibliothèque gorilla/mux pour créer un itinéraire et définit une fonction de traitement de requête GET getSales, qui renvoie un tableau JSON contenant des données de vente. Dans la fonction getSales, nous définissons un exemple fixe pour simuler les données de ventes, que vous pouvez modifier en fonction de la situation réelle.
Ensuite, nous utilisons ECharts pour dessiner le graphique linéaire, ce qui peut être réalisé en introduisant le fichier de bibliothèque ECharts dans le fichier HTML et en appelant l'API correspondante dans le code JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>销售统计</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>
var chart = echarts.init(document.getElementById('chart'));
// 发起HTTP请求获取销售额数据
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8000/sales", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var sales = JSON.parse(xhr.responseText);
var months = [];
var amounts = [];
for (var i = 0; i < sales.length; i++) {
months.push(sales[i].month);
amounts.push(sales[i].amount);
}
// 绘制折线图
chart.setOption({
xAxis: {
data: months
},
yAxis: {},
series: [{
name: '销售额',
type: 'line',
data: amounts
}]
});
}
}
xhr.send();
</script>
</body>
</html>Copier après la connexion
Dans le code ci-dessus, nous lançons une requête HTTP pour obtenir des données de vente via XMLHttpRequest, puis analysons et utilisons l'API ECharts pour dessiner un graphique linéaire. Lorsque nous dessinons un graphique linéaire, nous utilisons le mois comme axe des x et les ventes comme axe des y. Nous configurons le style et les données du graphique en définissant des paramètres tels que l'axe des x, l'axe des y et les séries.
Grâce aux exemples de code ci-dessus, nous pouvons voir que de superbes graphiques statistiques peuvent être facilement obtenus en utilisant ECharts et Golang. Il vous suffit d'obtenir les données via des requêtes HTTP, puis d'utiliser ECharts pour dessiner des graphiques sur le front-end, qui peuvent être facilement affichés. Dans le même temps, les puissantes capacités interactives d'ECharts peuvent améliorer encore l'effet de visualisation des graphiques, permettant aux utilisateurs d'avoir des interactions plus approfondies avec les graphiques.
Bien sûr, l'exemple ci-dessus n'est qu'une simple démonstration. En pratique, vous devez l'ajuster et l'étendre en fonction des besoins spécifiques et des structures de données. J'espère que cet article vous aidera à comprendre comment utiliser ECharts et Golang pour créer de superbes graphiques statistiques !
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)
