Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi
Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi
- WBOYasal
- 2023-12-18 11:04:04915semak imbas
Cara menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi
Abstrak: ECharts ialah perpustakaan carta visualisasi data sumber terbuka oleh Baidu, yang boleh menyokong pelbagai jenis carta dan operasi interaktif. Menggabungkan antara muka ECharts dan php, anda boleh merealisasikan paparan carta statistik data berbilang dimensi dengan mudah. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk melukis pelbagai jenis carta dan menggunakan antara muka php untuk menghantar data ke bahagian hadapan.
Kata kunci: ECharts, antara muka php, data berbilang dimensi, paparan carta statistik
1. Pengenalan latar belakang
Dalam visualisasi data, paparan carta statistik ialah cara yang biasa dan penting. ECharts menyediakan pelbagai jenis carta dan operasi interaktif untuk memenuhi pelbagai keperluan paparan data. Melalui antara muka php, kami boleh memindahkan data bahagian belakang dengan mudah ke bahagian hadapan untuk mencapai paparan carta dinamik.
2. Penggunaan asas ECharts
- Perkenalkan perpustakaan ECharts
Perkenalkan fail perpustakaan ECharts ke dalam halaman html dan buat div bekas untuk mengehoskan carta.
<!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>
- Buat contoh carta
Dalam JavaScript, buat contoh carta dan nyatakan bekas dan jenis carta.
var chart = echarts.init(document.getElementById('chart'));- Konfigurasikan parameter carta
Tentukan gaya dan data carta dengan mengkonfigurasi parameter carta.
var option = {
title: {
text: '图表标题'
},
xAxis: {
data: ['类别1', '类别2', '类别3']
},
yAxis: {},
series: [
{
name: '系列1',
type: 'bar',
data: [10, 20, 30]
},
{
name: '系列2',
type: 'bar',
data: [15, 25, 35]
}
]
};- Render carta
Gunakan parameter konfigurasi pada carta dengan memanggil kaedah carta.setOption.
chart.setOption(option);
3 Digabungkan dengan antara muka php untuk memindahkan data
- Pemprosesan data belakang
Dalam antara muka php, dapatkan data daripada pangkalan data atau sumber data lain mengikut keperluan perniagaan dan proses data.
$data = array(
'categories' => ['类别1', '类别2', '类别3'],
'series' => array(
array(
'name' => '系列1',
'data' => [10, 20, 30]
),
array(
'name' => '系列2',
'data' => [15, 25, 35]
)
)
);
echo json_encode($data); // 将数据转为 json 格式输出- Permintaan data bahagian hadapan
Gunakan objek XMLHttpRequest dalam JavaScript untuk menghantar permintaan data ke antara muka php dan menghuraikan data yang dikembalikan.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
var option = {
title: {
text: '图表标题'
},
xAxis: {
data: data.categories
},
yAxis: {},
series: data.series
};
chart.setOption(option);
}
};
xhr.open('GET', 'data.php', true);
xhr.send();Empat. Pelaksanaan pelbagai jenis carta
- Carta bar
var option = {
title: {
text: '条形图'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3']
},
series: [
{
name: '系列1',
type: 'bar',
data: [10, 20, 30]
}
]
};- Carta pai
var option = {
title: {
text: '饼图'
},
series: [
{
name: '系列1',
type: 'pie',
radius: '55%',
data: [
{value: 10, name: '类别1'},
{value: 20, name: '类别2'},
{value: 30, name: '类别3'}
]
}
]
};- Carta garisan
Atas ialah kandungan terperinci Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!