So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisieren-PHP-Tutorial-php.cn

So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisieren

WBOY

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

Original

916 Leute haben es durchsucht

So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisieren

Im Bereich der Datenvisualisierung ist ECharts eine weit verbreitete Front-End-Diagrammbibliothek, deren leistungsstarke Datenvisualisierungsfunktionen in verschiedenen Branchen gefragt sind. In tatsächlichen Projekten stoßen wir häufig auf Situationen, in denen zur Anzeige mehrere Diagramme verknüpft werden müssen. In diesem Artikel wird erläutert, wie ECharts- und PHP-Schnittstellen kombiniert werden, um die Anzeige statistischer Diagramme mit mehreren Diagrammen zu realisieren, und es werden spezifische Codebeispiele gegeben.

1. Erforderliche Fähigkeiten

In der Praxis dieses Artikels müssen Sie die folgenden Fähigkeiten beherrschen:

Grundkenntnisse in HTML, CSS und JavaScript;
Grundkenntnisse in PHP.
2. Anforderungsanalyse

Unsere Anforderung besteht darin, mehrere miteinander verbundene Diagramme auf einer Seite anzuzeigen, und diese Diagramme können miteinander verknüpft werden.

Die Anforderungsanalyse sieht wie folgt aus:

Auf der Seite befinden sich zwei Karten, eine Hauptkarte und eine Nebenkarte.

Auf der Seite gibt es ein Balkendiagramm und ein Liniendiagramm.
Auf der linken Seite sehen wir ein Dropdown-Menü. Dieses Dropdown-Menü enthält mehrere Optionen. Jede Option löst das entsprechende Neuladen der Daten aus und aktualisiert das entsprechende Diagramm.
Wenn wir eine Option im Dropdown-Menü auswählen, ändern sich alle Diagramme. Die Hauptkarte und die Unterkarte ändern sich entsprechend den Datenänderungen, und auch die Balkendiagramme und Liniendiagramme werden entsprechend aktualisiert.
3. Implementierungsplan

Seitenlayout

Layen Sie zunächst unsere Seite in einer HTML-Datei. Erstellen Sie einen Div-Container mit dem Namen „wrap“ und platzieren Sie alle Diagramme in diesem Div-Container. Unter anderem muss die Höhe des Kartencontainers auf 100 % eingestellt werden, um den Seitenraum voll auszunutzen.

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

Nach dem Login kopieren

Aufruf von ECharts

Verwenden Sie das

Neueste Artikel des Autors