Maison > Article > développement back-end > Comment charger dynamiquement des données de graphiques statistiques via l'interface php et ECharts
Comment charger dynamiquement des données de graphiques statistiques via l'interface php et ECharts
- WBOYoriginal
- 2023-12-17 14:27:391058parcourir
Comment implémenter le chargement dynamique des données de graphiques statistiques via l'interface PHP et ECharts
[Introduction]
Alors que la visualisation des données reçoit de plus en plus d'attention de la part des entreprises et des développeurs, l'application de graphiques statistiques est devenue de plus en plus répandue . En tant que bibliothèque de graphiques JavaScript open source, ECharts fournit une multitude de types de graphiques et de méthodes interactives. Combiné avec l'interface PHP, il peut charger dynamiquement des données de graphiques statistiques. Cet article présentera les étapes spécifiques d'utilisation de l'interface PHP et d'ECharts pour charger dynamiquement des données de graphiques statistiques et fournira un exemple de code pour référence.
【Étapes】
- Préparer les données
Tout d'abord, vous devez préparer les données qui doivent être affichées. Les données peuvent être obtenues via MySQL, API, etc., et les données peuvent être formatées au format JSON requis. En prenant un histogramme comme exemple, le format des données est le suivant :
[
{
"name": "数据1",
"value": 100
},
{
"name": "数据2",
"value": 200
},
{
"name": "数据3",
"value": 300
}
]- Créer une interface PHP
Ensuite, vous devez créer une interface PHP pour obtenir des données. L'exemple de code est le suivant :
<?php
header('Content-Type: application/json');
// 从数据库或API获取数据
$data = [
["name" => "数据1", "value" => 100],
["name" => "数据2", "value" => 200],
["name" => "数据3", "value" => 300]
];
echo json_encode($data);Grâce au code ci-dessus, nous pouvons renvoyer les données au format JSON requises au front-end.
- Créer un fichier HTML
Ensuite, créez un fichier HTML et importez les bibliothèques ECharts et jQuery. L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
$(function() {
// 使用jQuery的ajax方法调用PHP接口获取数据
$.ajax({
url: 'api.php',
type: 'GET',
dataType: 'json',
success: function(data) {
// 获取数据成功后，调用ECharts绘制图表
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '统计图'
},
tooltip: {},
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.name;
})
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(function(item) {
return item.value;
}),
type: 'bar'
}]
};
chart.setOption(option);
}
});
});
</script>
</body>
</html>Grâce au code ci-dessus, nous utilisons la méthode ajax pour appeler l'interface PHP afin d'obtenir des données, et utilisons ECharts pour dessiner l'histogramme.
【Résumé】
Grâce aux étapes ci-dessus, nous pouvons utiliser l'interface PHP et ECharts pour charger dynamiquement les données des graphiques statistiques. Tout d'abord, les données à afficher doivent être préparées et formatées au format JSON. Ensuite, créez une interface PHP pour obtenir des données et renvoyer les données au front-end au format JSON. Enfin, le front-end appelle l'interface PHP via ajax pour obtenir les données, et utilise ECharts pour dessiner le graphique correspondant.
【Code de référence】
Code de l'interface PHP :
<?php
header('Content-Type: application/json');
// 从数据库或API获取数据
$data = [
["name" => "数据1", "value" => 100],
["name" => "数据2", "value" => 200],
["name" => "数据3", "value" => 300]
];
echo json_encode($data);Code du fichier HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
$(function() {
// 使用jQuery的ajax方法调用PHP接口获取数据
$.ajax({
url: 'api.php',
type: 'GET',
dataType: 'json',
success: function(data) {
// 获取数据成功后，调用ECharts绘制图表
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '统计图'
},
tooltip: {},
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.name;
})
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(function(item) {
return item.value;
}),
type: 'bar'
}]
};
chart.setOption(option);
}
});
});
</script>
</body>
</html>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!