Tutorial praktikal PHP dan Vue.js: Cara menggunakan carta statistik untuk analisis visualisasi data

Tutorial praktikal PHP dan Vue.js: Cara menggunakan carta statistik untuk analisis visualisasi data

Pengenalan:
Dalam era maklumat hari ini, analisis dan visualisasi data telah menjadi bahagian yang amat diperlukan dalam semua lapisan masyarakat. Dalam pembangunan web, adalah gabungan biasa untuk menggunakan PHP sebagai bahasa bahagian belakang dan Vue.js sebagai rangka kerja bahagian hadapan. Artikel ini akan memperkenalkan cara menggabungkan PHP dan Vue.js untuk menggunakan carta statistik untuk mencapai analisis visualisasi data.

1. Mengapa memilih PHP dan Vue.js?
PHP, sebagai bahasa skrip sebelah pelayan, mempunyai pelbagai medan aplikasi. Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna, memudahkan pembangun bahagian hadapan membina aplikasi satu halaman yang kompleks. Gabungan PHP dan Vue.js boleh merealisasikan pembangunan berasingan bahagian hadapan dan belakang, meningkatkan kecekapan pembangunan dan fleksibiliti.

2. Persediaan awal
Sebelum memulakan pembangunan, kita perlu memastikan persekitaran PHP telah dipasang dan direktori kerja telah disediakan. Seterusnya, kita perlu memasang Vue.js dan beberapa perpustakaan visualisasi data biasa. Ia boleh dipasang menggunakan npm, dan berikut ialah beberapa perpustakaan yang biasa digunakan:

1. Vue.js: rangka kerja JavaScript yang progresif.
   npm install vue
2. Echarts.js: perpustakaan visualisasi data yang dilaksanakan dalam JavaScript.
   npm install echarts
3. Axios.js: Pustaka HTTP berasaskan Promise untuk menghantar permintaan tak segerak ke bahagian belakang.
   npm pasang axios

3 Cipta struktur direktori projek
Dalam direktori kerja, buat struktur direktori berikut:

• css
  -- style.css
• js
  -- php
js
• -- utama.js
  -- utama. - data.php
• index.html

Dalam direktori css, kami mencipta fail style.css baharu untuk menentukan gaya, seperti saiz bekas carta, dsb.

Dalam direktori js, kami mencipta fail main.js baharu untuk menulis kod berkaitan Vue.js.

Dalam direktori php, kami mencipta fail data.php baharu untuk mensimulasikan data bahagian belakang.

index.html akan digunakan sebagai fail kemasukan projek.

4. Penyediaan data
Dalam data.php, kami boleh mensimulasikan beberapa data bahagian belakang untuk menunjukkan penjanaan carta statistik. Contohnya:

$data = [

   ['name' => 'A', 'value' => 100],
   ['name' => 'B', 'value' => 200],
   ['name' => 'C', 'value' => 300],
   ['name' => 'D', 'value' => 400],
   ['name' => 'E', 'value' => 500]

];

echo json_encode($data);
?>

Dalam kod di atas, kami mencipta tatasusunan bernama $data dan menggunakan json_encode kaedah menukarnya menjadi rentetan dalam format JSON dan mengeluarkannya. Tatasusunan ini mengandungi beberapa data simulasi, seperti nama dan nilai.

5. Kod Vue.js
Dalam fail main.js, kami memperkenalkan perpustakaan yang diperlukan dan menulis kod Vue.js.

import Vue daripada 'vue'
import axios daripada 'axios'
import echarts daripada 'echarts'

Vue baharu({
el: '#app',
data: {

   chartData: []

}), {
dibuat

   this.fetchData();

},
kaedah: {

   fetchData() {
       axios.get('./php/data.php')
           .then(response => {
               this.chartData = response.data;
               this.drawChart();
           })
           .catch(error => {
               console.log(error);
           });
   },
   drawChart() {
       var chart = echarts.init(document.getElementById('chart-container'));
       var option = {
           title: {
               text: '数据统计图表'
           },
           xAxis: {
               type: 'category',
               data: this.chartData.map(item => item.name)
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: this.chartData.map(item => item.value),
               type: 'bar'
           }]
       };
       chart.setOption(option);
   }

}
})

Dalam kod di atas, kami menghantar permintaan tak segerak melalui axios dan memanggil kaedah fetchData untuk mendapatkan data hujung belakang. Kemudian, dalam kaedah drawChart, gunakan perpustakaan echarts untuk menjana carta statistik dan paparkan carta dalam bekas dengan bekas carta ID.

6. Kod halaman HTML
Dalam index.html, kami menulis kod HTML dan memperkenalkan fail CSS dan JS yang diperlukan. + ML Dalam kod, kami mula-mula memperkenalkan fail perpustakaan Vue.js, axios dan echarts. Kemudian, elemen dengan apl id dicipta sebagai elemen akar Vue.js dan elemen dengan bekas carta id dicipta di dalamnya untuk memaparkan carta.

7. Jalankan projek
Masukkan direktori kerja dalam terminal dan laksanakan arahan berikut untuk menjalankan projek:

npm run serve

Selepas pelaksanaan berjaya, lawati http://localhost:8080 untuk melihat carta yang dihasilkan.

8 Ringkasan
Artikel ini merealisasikan fungsi analisis visualisasi data dengan menggabungkan PHP dan Vue.js. Kami menggunakan PHP untuk mensimulasikan data bahagian belakang, dan menggunakan perpustakaan Vue.js dan echarts untuk menjana carta statistik untuk mencapai analisis visual data. Saya harap artikel ini akan membantu pemula memahami cara menggunakan carta statistik untuk analisis visualisasi data.

Atas ialah kandungan terperinci Tutorial praktikal PHP dan Vue.js: Cara menggunakan carta statistik untuk analisis visualisasi data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!