Heim > Artikel > Backend-Entwicklung > So zeigen Sie statistische Echtzeitdiagramme über ECharts und PHP-Schnittstellen an

So zeigen Sie statistische Echtzeitdiagramme über ECharts und PHP-Schnittstellen an

WBOYOriginal: 2023-12-17 16:35:431176Durchsuche

Mit der rasanten Entwicklung des Internets und der Big-Data-Technologie ist die Datenvisualisierung zu einem wichtigen Bestandteil geworden. Als hervorragende Open-Source-JavaScript-Datenvisualisierungsbibliothek kann ECharts uns dabei helfen, verschiedene statistische Diagramme einfach und effizient anzuzeigen. In diesem Artikel wird erläutert, wie Echtzeit-Statistikdiagramme über ECharts und PHP-Schnittstellen angezeigt werden, und es werden relevante Codebeispiele bereitgestellt.

1. Vorbereitung
Bevor wir beginnen, müssen wir einige Vorbereitungen treffen:

Installieren Sie die ECharts-Bibliothek: Sie können die neueste Version der ECharts-Bibliothek von der offiziellen Website von ECharts herunterladen (http://echarts.apache. org/) und führen Sie es in das Projekt ein.
PHP-Umgebung installieren: Wir müssen eine einfache PHP-Umgebung erstellen, um eine Datenschnittstelle bereitzustellen. Sie können eine integrierte Entwicklungsumgebung wie XAMPP oder WAMP installieren oder eine LAMP-Umgebung auf einem Linux-Server erstellen.

2. Datenbank und Datentabelle erstellen
Zur Vereinfachung der Demonstration verwenden wir hier ein einfaches Beispiel, wobei wir davon ausgehen, dass wir die Anzahl der Bestellungen pro Stunde anzeigen möchten. Zuerst müssen wir eine Datentabelle in der MySQL-Datenbank erstellen, um Bestelldaten zu speichern.

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;

Diese Tabelle enthält drei Felder, nämlich Bestell-ID, Bestellzeitpunkt und Bestellmenge.

3. PHP-Schnittstelle schreiben
Erstellen Sie eine neue Datei mit dem Namen „api.php“ im PHP-Projekt, um die Logik der Datenschnittstelle zu verwalten. Über diese Schnittstelle können wir die aktuellsten Bestelldaten erhalten. Hier ist ein einfaches Beispiel:

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

Dieser Code stellt zunächst eine Verbindung zur Datenbank her, fragt dann die neuesten Bestelldaten ab und gibt sie im JSON-Format zurück.

4. Schreiben Sie die Frontend-Seite
Als nächstes müssen wir die ECharts-Bibliothek in die Frontend-Seite einführen und die Anzeige von Echtzeit-Statistikdiagrammen realisieren. Angenommen, wir nennen die Seite „index.php“. Hier ist ein einfaches Beispiel:

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

Dieser HTML-Code führt zunächst die ECharts-Bibliothek ein und erstellt einen Container auf der Seite, um statistische Diagramme anzuzeigen. Anschließend wird über JavaScript-Code die HTTP-Anforderungsschnittstelle implementiert, die neuesten Bestelldaten abgerufen und zu den Daten hinzugefügt. Schließlich wird die setOption-Methode von ECharts zum Anzeigen des statistischen Diagramms verwendet. Um den Echtzeit-Aktualisierungseffekt zu erzielen, verwenden wir die setInterval-Funktion von JavaScript, um die Schnittstelle jede Sekunde aufzurufen.

5. Führen Sie das Projekt aus
Öffnen Sie die Seite „index.php“ im Browser, um die Anzeige von Echtzeit-Statistikdiagrammen anzuzeigen. Jede Sekunde sendet die Seite eine Anfrage an das Backend, um die neuesten Bestelldaten abzurufen und sie zur Anzeige in das Diagramm einzufügen.

Zusammenfassung: Durch die Einleitung dieses Artikels haben wir gelernt, wie man statistische Echtzeitdiagramme über ECharts und PHP-Schnittstellen anzeigt. Indem wir ständig die neuesten Daten abrufen und Diagramme aktualisieren, sind wir in der Lage, Datenänderungen in Echtzeit zu überwachen und anzuzeigen. Dies hat wichtige Auswirkungen auf die Datenanalyse und Geschäftsentscheidungen.

(Hinweis: Die obigen Codebeispiele dienen nur als Referenz, die spezifische Implementierung wird entsprechend der tatsächlichen Situation angepasst)

Das obige ist der detaillierte Inhalt vonSo zeigen Sie statistische Echtzeitdiagramme über ECharts und PHP-Schnittstellen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript mysql json echarts html 接口数据库 apache 数据分析 http linux

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：PHP und WebSocket: die perfekte Lösung für sofortige KommunikationNächster Artikel：PHP und WebSocket: die perfekte Lösung für sofortige Kommunikation

In Verbindung stehende Artikel

Mehr sehen