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

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

WBOYOriginal: 2023-12-18 10:07:08554Durchsuche

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>

Aufruf von ECharts

Wir müssen die ECharts-Bibliotheksdatei in die Seite einführen. Diese Bibliotheksdatei kann von der offiziellen ECharts-Website (https://echarts.apache.org/en/download.html) heruntergeladen werden.

Verwenden Sie das <script>-Tag in der HTML-Datei, um die ECharts-Bibliotheksdatei einzuführen und die entsprechende Diagramminstanz zu erstellen. Wir benennen die Diagramminstanzen im Code chart1, chart2, map1 und map2. </script>

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

Daten abrufen

Wir verwenden PHP, um eine Schnittstelle zu schreiben, um Daten vom Server abzurufen. Das spezifische Datenformat kann entsprechend den tatsächlichen Anforderungen gestaltet werden. In diesem Artikel gehen wir davon aus, dass das zurückgegebene Datenformat wie folgt lautet:

{
    "map1_data":[...],
    "map2_data":[...],
    "chart1_data":[...],
    "chart2_data":[...],
    ...
}

Hier verwenden wir die .ajax()-Methode von jQuery, um Daten vom Server anzufordern, und rufen nach erfolgreicher Anforderung die entsprechende Funktion zum Zeichnen des Diagramms auf.

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

Diagramme zeichnen

Als nächstes müssen wir Funktionen schreiben, um anhand der empfangenen Daten Karten, Balkendiagramme und Liniendiagramme zu zeichnen. In diesem Artikel verwenden wir die ECharts-API zum Zeichnen von Diagrammen. Informationen zur spezifischen API-Nutzung finden Sie in der offiziellen Dokumentation von 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);
}

Chart-Verknüpfung

Im letzten Schritt müssen wir eine Verknüpfung zwischen Diagrammen herstellen. Wenn der Benutzer eine Option im Dropdown-Menü auswählt, ändern sich alle Diagramme entsprechend.

Wir können die Methode „dispatchAction()“ in der ECharts-API verwenden, um eine Verknüpfung zwischen Diagrammen einzurichten. Wenn ein Diagramm ausgewählt wird, müssen wir die ausgewählten Daten des Diagramms an andere Diagramme übergeben.

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

In diesem Artikel haben wir vorgestellt, wie man ECharts und PHP-Schnittstellen kombiniert, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu erreichen. Wir haben zunächst die Anforderungen verstanden, dann einen detaillierten Implementierungsplan vorgelegt und spezifische Codebeispiele aus fünf Aspekten bereitgestellt: Seitenlayout, Aufruf der ECharts-Bibliothek, Abrufen von Daten und Zeichnen von Diagrammen sowie Realisierung der Diagrammverknüpfung. Durch das Studium dieses Artikels glaube ich, dass Leser die ECharts-Bibliothek besser nutzen können, um Daten zu visualisieren, die in der Verknüpfung mehrerer Diagramme angezeigt werden.

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery css ajax echarts html 接口 apache https

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：So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisierenNächster Artikel：So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mit Multi-Chart-Verknüpfung zu realisieren

In Verbindung stehende Artikel

Mehr sehen