Bagaimana untuk memaparkan carta statistik masa nyata melalui antara muka ECharts dan php-tutorial php-php.cn

Bagaimana untuk memaparkan carta statistik masa nyata melalui antara muka ECharts dan php

WBOY

Lepaskan： 2023-12-17 16:38:02

asal

1153 orang telah melayarinya

Bagaimana untuk memaparkan carta statistik masa nyata melalui antara muka ECharts dan php

Cara untuk memaparkan carta statistik masa nyata melalui antara muka ECharts dan PHP

Dengan perkembangan pesat Internet dan teknologi data besar, visualisasi data telah menjadi bahagian penting. Sebagai perpustakaan visualisasi data JavaScript sumber terbuka yang sangat baik, ECharts boleh membantu kami memaparkan pelbagai carta statistik dengan mudah dan cekap. Artikel ini akan memperkenalkan cara memaparkan carta statistik masa nyata melalui antara muka ECharts dan PHP, serta menyediakan contoh kod yang berkaitan.

1. Persediaan
Sebelum kita mula, kita perlu melakukan beberapa persediaan:

Pasang perpustakaan ECharts: Anda boleh memuat turun versi terkini perpustakaan ECharts dari laman web rasmi ECharts (http://echarts.apache. org/), dan Perkenalkannya ke dalam projek.
Pasang persekitaran PHP: Kami perlu membina persekitaran PHP yang mudah untuk menyediakan antara muka data. Anda boleh memasang persekitaran pembangunan bersepadu seperti XAMPP atau WAMP, atau membina persekitaran LAMP pada pelayan Linux.

2. Buat pangkalan data dan jadual data
Untuk kemudahan demonstrasi, kami menggunakan contoh mudah di sini, dengan mengandaikan bahawa kami ingin memaparkan bilangan pesanan setiap jam. Pertama, kita perlu mencipta jadual data dalam pangkalan data MySQL untuk menyimpan data pesanan.

CREATE TABLE `orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `time` datetime DEFAULT NULL,
  `count` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Salin selepas log masuk

Jadual ini mengandungi tiga medan iaitu ID pesanan, masa pesanan dan kuantiti pesanan.

3. Tulis antara muka PHP
Buat fail baharu bernama "api.php" dalam projek PHP untuk mengendalikan logik antara muka data. Melalui antara muka ini, kita boleh mendapatkan data pesanan terkini. Berikut ialah contoh mudah:

<?php
// 引入数据库配置文件
include('config.php');

// 连接数据库
$conn = mysqli_connect($db_host, $db_user, $db_password, $db_name);
if (!$conn) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 获取最新的订单数据
$sql = "SELECT * FROM orders ORDER BY time DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);

// 返回JSON格式的订单数据
echo json_encode($row);

// 关闭数据库连接
mysqli_close($conn);
?>

Salin selepas log masuk

Kod ini mula-mula bersambung ke pangkalan data, kemudian menanyakan data pesanan terkini dan mengembalikannya dalam format JSON.

4. Tulis halaman hadapan
Seterusnya, kita perlu memperkenalkan perpustakaan ECharts ke halaman hujung hadapan dan merealisasikan paparan carta statistik masa nyata. Katakan kita menamakan halaman "index.php". Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实时统计图展示</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 统计图容器 -->
    <div id="chart" style="height: 400px;"></div>

    <!-- JavaScript代码 -->
    <script>
        // 创建ECharts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 定义初始数据
        var data = [];

        // 请求接口获取数据
        function fetchData() {
            // 发送HTTP请求
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var result = JSON.parse(xmlhttp.responseText);
                    var time = new Date(result.time);
                    var count = result.count;

                    // 更新数据
                    data.push({
                        name: time.getHours() + ':00',
                        value: count
                    });

                    // 显示统计图
                    myChart.setOption({
                        xAxis: {
                            data: data.map(function(item) {
                                return item.name;
                            })
                        },
                        series: [{
                            data: data.map(function(item) {
                                return item.value;
                            })
                        }]
                    });
                }
            };
            xmlhttp.open("GET", "api.php", true);
            xmlhttp.send();
        }

        // 循环调用接口，以实现实时刷新
        setInterval(fetchData, 1000);
    </script>
</body>
</html>

Salin selepas log masuk

Kod HTML ini mula-mula memperkenalkan perpustakaan ECharts dan mencipta bekas dalam halaman untuk memaparkan carta statistik. Kemudian melalui kod JavaScript, antara muka permintaan HTTP dilaksanakan, data pesanan terkini diperoleh, dan ditambah pada data, dan akhirnya kaedah setOption ECharts digunakan untuk memaparkan carta statistik. Untuk mencapai kesan penyegaran masa nyata, kami menggunakan fungsi setInterval JavaScript untuk memanggil antara muka setiap saat.

5. Jalankan projek
Buka halaman "index.php" dalam penyemak imbas untuk melihat paparan carta statistik masa nyata. Setiap saat, halaman akan menghantar permintaan ke bahagian belakang untuk mendapatkan data pesanan terkini dan menambahkannya pada carta untuk paparan.

Ringkasan: Melalui pengenalan artikel ini, kami telah mempelajari cara memaparkan carta statistik masa nyata melalui antara muka ECharts dan PHP. Dengan sentiasa mendapatkan data terkini dan mengemas kini carta, kami dapat memantau dan memaparkan perubahan data dalam masa nyata. Ini mempunyai implikasi penting untuk analisis data dan membuat keputusan perniagaan.

(Nota: Contoh kod di atas adalah untuk rujukan sahaja, pelaksanaan khusus akan diselaraskan mengikut situasi sebenar)

Atas ialah kandungan terperinci Bagaimana untuk memaparkan carta statistik masa nyata melalui antara muka ECharts dan php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!