pembangunan bahagian belakang
tutorial php
Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik pautan berbilang carta
Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik pautan berbilang carta
Dalam bidang visualisasi data, ECharts ialah perpustakaan carta bahagian hadapan yang digunakan secara meluas, dan fungsi visualisasi datanya yang berkuasa dicari oleh pelbagai industri. Dalam projek sebenar, kami sering menghadapi situasi di mana berbilang carta perlu dipaparkan dalam cara yang dipautkan Artikel ini akan memperkenalkan cara menggabungkan antara muka ECharts dan PHP untuk merealisasikan paparan carta statistik terpaut bagi berbilang carta, dan memberikan contoh kod tertentu.
1. Kemahiran pra-syarat
Dalam latihan artikel ini, anda perlu menguasai kemahiran berikut:
- Pengetahuan asas HTML, CSS dan JavaScript
- Pengetahuan asas tentang
- ; PHP.
2. Analisis Keperluan
Keperluan kami adalah untuk memaparkan berbilang carta yang saling berkaitan pada satu halaman, dan carta ini boleh dipautkan antara satu sama lain.
Analisis keperluan adalah seperti berikut:
- Terdapat dua peta pada halaman, peta utama dan peta sekunder.
- Terdapat carta palang dan carta garisan pada halaman tersebut.
- Di sebelah kiri halaman, kita boleh melihat menu lungsur turun ini mengandungi berbilang pilihan Setiap pilihan akan mencetuskan muat semula data yang sepadan dan mengemas kini carta yang sepadan.
- Apabila kami memilih mana-mana pilihan dalam menu lungsur, semua carta akan berubah Peta utama dan sub-peta akan berubah mengikut perubahan dalam data, dan carta bar dan carta garis juga akan dikemas kini dengan sewajarnya.
3. Pelan pelaksanaan
- Susun atur halaman
Pertama, susun halaman kami dalam fail HTML. Buat bekas div bernama bungkus dan letakkan semua carta dalam bekas div ini. Antaranya, ketinggian bekas peta perlu ditetapkan kepada 100% untuk menggunakan sepenuhnya ruang halaman.
<body>
<div id="wrap">
<div id="map1" style="height: 100%; width: 60%; float:left; "></div>
<div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
<div id="map2" style="height: 100%; width:60%; float:left;"></div>
<div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
</div>
</body>- Memanggil ECharts
Kami perlu memperkenalkan fail perpustakaan ECharts ke dalam halaman. Fail perpustakaan ini boleh dimuat turun dari laman web rasmi ECharts (https://echarts.apache.org/en/download.html).
Gunakan teg
<!-- 引入ECharts的库文件 -->
<script src="echarts.common.min.js"></script>
<script>
// 创建主地图的图表实例
var map1 = echarts.init(document.getElementById('map1'));
// 创建次地图的图表实例
var map2 = echarts.init(document.getElementById('map2'));
// 创建条形图的图表实例
var chart1 = echarts.init(document.getElementById('chart1'));
// 创建折线图的图表实例
var chart2 = echarts.init(document.getElementById('chart2'));
</script>- Dapatkan data
Kami menggunakan PHP untuk menulis antara muka untuk mendapatkan data daripada pelayan. Format data khusus boleh direka bentuk mengikut keperluan sebenar. Dalam artikel ini, kami menganggap bahawa format data yang dikembalikan adalah seperti berikut:
{
"map1_data":[...],
"map2_data":[...],
"chart1_data":[...],
"chart2_data":[...],
...
}Di sini kami menggunakan kaedah .ajax() jQuery untuk meminta data daripada pelayan, dan memanggil fungsi yang sepadan untuk melukis carta selepas permintaan itu berjaya.
function getData(option) {
$.ajax({
type: "POST",
url: "getdata.php",
data: option,
dataType: "json",
success: function(response) {
drawMap1(response.map1_data);
drawMap2(response.map2_data);
drawChart1(response.chart1_data);
drawChart2(response.chart2_data);
...
}
});
}- Melukis Carta
Seterusnya, kita perlu menulis fungsi untuk melukis peta, carta bar dan carta garis menggunakan data yang kita terima. Dalam artikel ini, kami menggunakan API ECharts untuk melukis carta. Untuk penggunaan API khusus, sila rujuk dokumentasi rasmi ECharts.
function drawMap1(data) {
// 使用接收到的数据进行地图实例的数据更新
map1.setOption(option);
}
function drawMap2(data) {
// 使用接收到的数据进行地图实例的数据更新
map2.setOption(option);
}
function drawChart1(data) {
// 使用接收到的数据进行条形图实例的数据更新
chart1.setOption(option);
}
function drawChart2(data) {
// 使用接收到的数据进行折线图实例的数据更新
chart2.setOption(option);
}- Kaitan carta
Dalam langkah terakhir, kita perlu mencapai hubungan antara carta. Apabila pengguna memilih sebarang pilihan dalam menu lungsur, semua carta akan berubah dengan sewajarnya.
Kita boleh menggunakan kaedah dispatchAction() dalam API ECharts untuk menyediakan pautan antara carta. Apabila carta dipilih, kita perlu menghantar data carta yang dipilih ke carta lain.
option1.on('mapSelect', function(params) {
// 获取地图选中的区域
var selectedData = params.batch[0].selected[0];
// 为条形图和折线图设置选中数据
chart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
chart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
// 为次地图设置选中数据
map2.dispatchAction({
type: 'mapSelect',
name: selectedData.name,
seriesIndex: 0
});
// 为请求数据添加参数
var option = {
map1_data: selectedData.name,
...
}
// 请求更新数据
getData(option);
});4 Ringkasan
Dalam artikel ini, kami memperkenalkan cara menggabungkan antara muka ECharts dan PHP untuk mencapai paparan carta statistik pautan berbilang carta. Kami mula-mula memahami keperluan, dan kemudian memberikan pelan pelaksanaan terperinci dan menyediakan contoh kod khusus daripada lima aspek: susun atur halaman, memanggil perpustakaan ECharts, mendapatkan data dan carta lukisan, dan merealisasikan kaitan carta. Selepas mengkaji artikel ini, saya percaya pembaca boleh menggunakan perpustakaan ECharts dengan lebih baik untuk menggambarkan data yang dipaparkan dalam pautan berbilang carta.
Atas ialah kandungan terperinci Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik pautan berbilang carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka
Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP
Dec 20, 2024 am 11:31 AM
Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c
7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini
Nov 13, 2024 am 09:42 AM
Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API.
Apr 05, 2025 am 12:04 AM
JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,
Program PHP untuk mengira vokal dalam rentetan
Feb 07, 2025 pm 12:12 PM
Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6
Terangkan pengikatan statik lewat dalam php (statik: :).
Apr 03, 2025 am 12:04 AM
Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.
Apakah kaedah Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan?
Apr 03, 2025 am 12:03 AM
Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.
