Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik pautan berbilang carta-tutorial php-php.cn

Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik pautan berbilang carta

WBOY

Lepaskan： 2023-12-18 10:08:02

asal

868 orang telah melayarinya

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>

Salin selepas log masuk

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 dalam fail HTML untuk memperkenalkan fail perpustakaan ECharts dan buat contoh carta yang sepadan. Kami menamakan contoh carta dalam carta kod1, carta2, peta1 dan peta2.

<!-- 引入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>

Salin selepas log masuk

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":[...],
    ...
}

Salin selepas log masuk

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);
            ...
        }
    });
}

Salin selepas log masuk

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);
}

Salin selepas log masuk

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);
});

Salin selepas log masuk

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!