Cara menggunakan antara muka php dan ECharts untuk melaksanakan penapisan data dan penapisan carta statistik, contoh kod khusus diperlukan
Dalam visualisasi data, menggunakan carta statistik ialah cara biasa untuk memaparkan data. Dalam aplikasi praktikal, data selalunya perlu ditapis dan ditapis untuk memenuhi keperluan yang berbeza. Antara muka PHP dan ECharts ialah dua alat yang digunakan secara meluas di mana penapisan data dan penapisan carta statistik boleh dilaksanakan.
Yang berikut akan menggunakan contoh untuk menunjukkan cara menggunakan antara muka PHP dan ECharts untuk melaksanakan penapisan dan penapisan data.
Pertama, kita perlu menyediakan sumber data, seperti sumber data yang mengandungi data suhu untuk berbilang bandar. Sumber data boleh berupa jadual pangkalan data, fail CSV atau fail JSON, dsb. Andaikan bahawa kami telah menyediakan fail JSON dengan kandungan berikut:
[
{"city": "北京", "temperature": 25},
{"city": "上海", "temperature": 28},
{"city": "廣州", "temperature": 30},
{"city": "深圳", "temperature": 31},
{"city": "成都", "temperature": 26},
{"city": "重慶", "temperature": 29}
] Seterusnya, kami perlu mencipta antara muka PHP untuk mengendalikan permintaan penapisan dan penapisan data. Kita boleh menggunakan fungsi operasi fail PHP untuk membaca fail sumber data dan menapis serta menapis data berdasarkan keadaan pertanyaan. Berikut ialah contoh kod mudah:
<?php
// 讀取數(shù)據(jù)源文件
$data = file_get_contents('data.json');
// 解析 JSON 數(shù)據(jù)
$data = json_decode($data, true);
// 篩選和過濾數(shù)據(jù)
if (isset($_GET['city'])) {
$city = $_GET['city'];
$filteredData = [];
foreach ($data as $item) {
if ($item['city'] === $city) {
$filteredData[] = $item;
}
}
echo json_encode($filteredData);
} else {
echo json_encode($data);
}
?>Dalam kod di atas, kami mula-mula membaca fail sumber data menggunakan fungsi file_get_contents dan menghuraikannya ke dalam tatasusunan PHP melalui json_decode fungsi. Kemudian, kami menentukan sama ada terdapat nama bandar yang dihantar ke antara muka PHP sebagai syarat pertanyaan. Jika ada, kami melintasi tatasusunan data, menapis berdasarkan nama bandar dan mengembalikan data yang ditapis ke dalam tatasusunan baharu. Jika tiada syarat pertanyaan, kami mengembalikan data asal secara langsung. file_get_contents 函數(shù)讀取數(shù)據(jù)源文件，并通過 json_decode 函數(shù)解析為 PHP 數(shù)組。然后，我們判斷是否有城市名稱作為查詢條件傳遞給 PHP 接口。如果有，我們遍歷數(shù)據(jù)數(shù)組，根據(jù)城市名稱進行篩選，并將篩選后的數(shù)據(jù)組成新的數(shù)組返回。如果沒有查詢條件，我們直接返回原始數(shù)據(jù)。
使用 PHP 接口之后，我們需要在前端頁面中使用 ECharts 來展示數(shù)據(jù)并進行篩選和過濾。以下是一個簡單的HTML頁面代碼，其中包含 ECharts 的引入和初始化代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 數(shù)據(jù)篩選和過濾示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<select id="citySelect">
<option value="">全部城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
<option value="成都">成都</option>
<option value="重慶">重慶</option>
</select>
<script>
// 使用 Ajax 請求 PHP 接口獲取數(shù)據(jù)
function fetchData(city) {
var url = 'api.php';
if (city) {
url += '?city=' + encodeURIComponent(city);
}
return fetch(url)
.then(function(response) {
return response.json();
})
.then(function(data) {
return data;
});
}
// 初始化圖表
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '城市氣溫'
},
tooltip: {},
legend: {
data:['城市氣溫']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '城市氣溫',
type: 'bar',
data: []
}]
};
// 初始渲染圖表
fetchData().then(function(data) {
var cities = [];
var temperatures = [];
for (var i = 0; i < data.length; i++) {
cities.push(data[i].city);
temperatures.push(data[i].temperature);
}
option.xAxis.data = cities;
option.series[0].data = temperatures;
chart.setOption(option);
});
// 監(jiān)聽下拉框選擇變化事件，根據(jù)選擇的值重新獲取數(shù)據(jù)并更新圖表
var citySelect = document.getElementById('citySelect');
citySelect.addEventListener('change', function() {
var city = citySelect.value;
fetchData(city).then(function(data) {
var cities = [];
var temperatures = [];
for (var i = 0; i < data.length; i++) {
cities.push(data[i].city);
temperatures.push(data[i].temperature);
}
option.xAxis.data = cities;
option.series[0].data = temperatures;
chart.setOption(option);
});
});
</script>
</body>
</html>在上述 HTML 代碼中，我們使用了一個 <select></select> 元素作為篩選條件的選擇框，通過監(jiān)聽其 change 事件來重新獲取數(shù)據(jù)并更新圖表。在 fetchData 函數(shù)中，我們使用了 fetch 函數(shù)進行 Ajax 請求，并將響應(yīng)數(shù)據(jù)解析為 JSON 格式。
同時，在初始化圖表時，我們調(diào)用了 fetchData 函數(shù)，將獲取到的數(shù)據(jù)進行處理，然后將處理后的數(shù)據(jù)賦值給 ECharts 中的 option 對象，最后通過 chart.setOption(option)
Selepas menggunakan antara muka PHP, kita perlu menggunakan ECharts di halaman hadapan untuk memaparkan data dan penapis. Berikut ialah kod halaman HTML ringkas, yang mengandungi kod pengenalan dan permulaan ECharts:
rrreee
Dalam kod HTML di atas, kami menggunakan elemen
<select></select> sebagai kotak pilihan untuk keadaan penapis , Ambil semula data dan kemas kini carta dengan mendengar acara
changenya. Dalam fungsi
fetchData, kami menggunakan fungsi
fetch untuk membuat permintaan Ajax dan menghuraikan data respons ke dalam format JSON. ????Pada masa yang sama, apabila memulakan carta, kami memanggil fungsi
fetchData untuk memproses data yang diperoleh, dan kemudian memberikan data yang diproses kepada objek
option dalam ECharts , dan akhirnya memaparkan carta melalui
chart.setOption(option). ????Melalui contoh kod di atas, kami boleh melaksanakan penapisan dan penapisan data carta statistik berdasarkan antara muka PHP dan ECharts. Dalam aplikasi praktikal, kami boleh mengubah suai dan melanjutkan kod ini mengikut keperluan khusus untuk memenuhi keperluan analisis data dan visualisasi yang lebih kompleks. ??
Atas ialah kandungan terperinci Cara menggunakan antara muka php dan ECharts untuk melaksanakan penapisan data dan penapisan carta statistik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!