Heim > Artikel > Backend-Entwicklung > 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:
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.<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
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
{ "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
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
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!