Maison > Article > développement back-end > Comment dessiner facilement divers graphiques statistiques à l'aide d'ECharts et de Golang
Comment dessiner facilement divers graphiques statistiques à l'aide d'ECharts et de Golang
- 王林original
- 2023-12-18 15:40:191206parcourir
Avec la demande croissante d'analyse de données, dessiner divers graphiques statistiques est devenu un besoin très courant. ECharts et Golang sont deux très bons outils qui peuvent nous aider à dessiner facilement divers graphiques. Ci-dessous, je présenterai comment utiliser ECharts et Golang pour atteindre cet objectif, tout en fournissant quelques exemples de code spécifiques.
- Installation et utilisation d'ECharts
Avant d'utiliser ECharts, nous devons d'abord l'installer. Vous pouvez télécharger la dernière version stable sur le site officiel (https://echarts.apache.org) et suivre les instructions pour l'installer. Une fois l'installation terminée, nous pouvons commencer à utiliser ECharts pour dessiner différents types de graphiques.
Lors de l'utilisation d'ECharts, nous devons préparer un tableau contenant toutes les données, puis le transmettre à ECharts pour générer automatiquement le graphique correspondant. Vous trouverez ci-dessous un exemple de code simple qui trace un histogramme.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [5, 20, 36, 10, 10, 20];
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>Comme vous pouvez le voir, cet exemple de code contient une page HTML avec un tableau JavaScript contenant des données insérées. ECharts convertira automatiquement les données en histogramme et les restituera à l'élément avec l'ID « principal ».
De plus, ECharts propose également différents types de graphiques, tels que des graphiques linéaires, des diagrammes circulaires, des graphiques en nuages de points, etc. Nous pouvons choisir différents types de graphiques en fonction des besoins réels.
- Utilisez Golang pour préparer les données
golang est un langage de programmation très populaire. Il prend en charge une variété de structures de données et diverses opérations, et est très approprié pour le traitement des données. Avant d'utiliser ECharts, nous devons généralement préparer toutes les données graphiques à dessiner et les convertir dans un format pouvant être reconnu par ECharts. golang peut nous aider à terminer ce travail.
Ce qui suit est un programme Golang simple qui peut générer un tableau contenant 100 nombres aléatoires et le générer au format json.
package main
import (
"encoding/json"
"fmt"
"math/rand"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
data := make([]Data, 0)
for i := 0; i < 100; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
fmt.Println(string(jsonData))
}Dans ce programme, nous utilisons le package rand pour générer un tableau contenant 100 nombres aléatoires, puis le convertissons en données au format json. Ces données json peuvent être directement reconnues par ECharts et utilisées pour dessiner différents types de graphiques.
- Intégrer ECharts et Golang
Avec ECharts et Golang, nous pouvons commencer à intégrer les deux et dessiner différents types de graphiques. Vous trouverez ci-dessous un simple programme Golang qui génère un tableau json contenant des données aléatoires et le transmet à une page HTML. Dans la page HTML, nous pouvons utiliser ECharts pour dessiner ces données dans un histogramme.
code golang :
package main
import (
"encoding/json"
"fmt"
"math/rand"
"net/http"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make([]Data, 0)
for i := 0; i < 10; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
fmt.Fprintf(w, `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = %s;
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>
`, jsonData)
})
http.ListenAndServe(":8080", nil)
}Dans ce code, nous utilisons le package net/http pour créer un serveur Web simple et générer un tableau json contenant des données aléatoires lors de l'accès au répertoire racine. Ce tableau json peut être utilisé directement par les pages HTML.
Page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>Dans cette page HTML, nous utilisons la méthode JSON.parse() pour analyser les données json générées par golang dans un tableau javascript, puis les transmettons à ECharts. Finalement, nous obtenons un joli histogramme.
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!