Home > Article > Backend Development > How to dynamically load statistical chart data through the php interface and ECharts
How to dynamically load statistical chart data through the php interface and ECharts
- WBOYOriginal
- 2023-12-17 14:27:391056browse
How to dynamically load statistical chart data through the PHP interface and ECharts
[Introduction]
As data visualization becomes more and more popular among enterprises and developers Attention, the application of statistical charts is becoming more and more widespread. As an open source JavaScript chart library, ECharts provides a wealth of chart types and interaction methods. Combined with the PHP interface, it can dynamically load statistical chart data. This article will introduce the specific steps of how to use the PHP interface and ECharts to dynamically load statistical chart data, and provide sample code for reference.
[Steps]
- Prepare data
First, you need to prepare the data that needs to be displayed. Data can be obtained through MySQL, API, etc., and the data can be formatted into the required JSON format. Taking the histogram as an example, the data format is as follows:
[
{
"name": "数据1",
"value": 100
},
{
"name": "数据2",
"value": 200
},
{
"name": "数据3",
"value": 300
}
]- Create a PHP interface
Next, you need to create a PHP interface for obtaining data. The sample code is as follows:
<?php
header('Content-Type: application/json');
// 从数据库或API获取数据
$data = [
["name" => "数据1", "value" => 100],
["name" => "数据2", "value" => 200],
["name" => "数据3", "value" => 300]
];
echo json_encode($data);Through the above code, we can return the required JSON format data to the front end.
- Create HTML file
Next, create an HTML file and introduce ECharts and jQuery libraries. The sample code is as follows:
<!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>Through the above code, we use the ajax method to call the PHP interface to obtain data, and use ECharts to draw a histogram.
[Summary]
Through the above steps, we can use the PHP interface and ECharts to dynamically load statistical chart data. First, the data to be displayed needs to be prepared and formatted into JSON format. Then, create a PHP interface to obtain data and return the data to the front end in JSON format. Finally, the front end calls the PHP interface through ajax to obtain the data, and uses ECharts to draw the corresponding chart.
【Reference code】
PHP interface code:
<?php
header('Content-Type: application/json');
// 从数据库或API获取数据
$data = [
["name" => "数据1", "value" => 100],
["name" => "数据2", "value" => 200],
["name" => "数据3", "value" => 300]
];
echo json_encode($data);HTML file code:
<!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>The above is the detailed content of How to dynamically load statistical chart data through the php interface and ECharts. For more information, please follow other related articles on the PHP Chinese website!