Heim > Artikel > Backend-Entwicklung > So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren
So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren
- WBOYOriginal
- 2023-12-18 11:04:04927Durchsuche
So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammdarstellung mehrdimensionaler Daten zu realisieren
Zusammenfassung: ECharts ist eine Open-Source-Bibliothek für Datenvisualisierungsdiagramme von Baidu, die mehrere Diagrammtypen und interaktive Vorgänge unterstützen kann. Durch die Kombination von ECharts und PHP-Schnittstellen können Sie auf einfache Weise eine statistische Diagrammdarstellung mehrdimensionaler Daten realisieren. In diesem Artikel wird erläutert, wie Sie mit ECharts verschiedene Arten von Diagrammen zeichnen und die PHP-Schnittstelle verwenden, um Daten an das Frontend zu übergeben.
Schlüsselwörter: ECarts, PHP-Schnittstelle, mehrdimensionale Daten, statistische Diagrammanzeige
1 Hintergrundeinführung
Bei der Datenvisualisierung ist die statistische Diagrammanzeige eine gängige und wichtige Methode. ECharts bietet eine Fülle von Diagrammtypen und interaktiven Operationen, um eine Vielzahl von Datenanzeigeanforderungen zu erfüllen. Über die PHP-Schnittstelle können wir Back-End-Daten einfach an das Front-End übertragen, um eine dynamische Diagrammanzeige zu erreichen.
2. Grundlegende Verwendung von ECharts
- Führen Sie die ECharts-Bibliotheksdatei in die HTML-Seite ein und erstellen Sie ein Container-Div zum Hosten des Diagramms.
<!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>
Erstellen Sie eine Diagramminstanz
- Erstellen Sie in JavaScript eine Diagramminstanz und geben Sie den Container und den Diagrammtyp an.
var chart = echarts.init(document.getElementById('chart'));Diagrammparameter konfigurieren
- Definieren Sie den Stil und die Daten des Diagramms, indem Sie die Parameter des Diagramms konfigurieren.
var option = {
title: {
text: '图表标题'
},
xAxis: {
data: ['类别1', '类别2', '类别3']
},
yAxis: {},
series: [
{
name: '系列1',
type: 'bar',
data: [10, 20, 30]
},
{
name: '系列2',
type: 'bar',
data: [15, 25, 35]
}
]
};Diagramm rendern
- Wenden Sie Konfigurationsparameter auf das Diagramm an, indem Sie die Methode chart.setOption aufrufen.
chart.setOption(option);
Back-End-Datenverarbeitung
- Beziehen Sie in der PHP-Schnittstelle Daten aus der Datenbank oder anderen Datenquellen entsprechend den Geschäftsanforderungen und verarbeiten Sie die Daten.
$data = array(
'categories' => ['类别1', '类别2', '类别3'],
'series' => array(
array(
'name' => '系列1',
'data' => [10, 20, 30]
),
array(
'name' => '系列2',
'data' => [15, 25, 35]
)
)
);
echo json_encode($data); // 将数据转为 json 格式输出Front-End-Datenanforderung
- Verwenden Sie das XMLHttpRequest-Objekt in JavaScript, um eine Datenanforderung an die PHP-Schnittstelle zu senden und die zurückgegebenen Daten zu analysieren.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
var option = {
title: {
text: '图表标题'
},
xAxis: {
data: data.categories
},
yAxis: {},
series: data.series
};
chart.setOption(option);
}
};
xhr.open('GET', 'data.php', true);
xhr.send();Balkendiagramm
- Kreisdiagramm
var option = {
title: {
text: '条形图'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3']
},
series: [
{
name: '系列1',
type: 'bar',
data: [10, 20, 30]
}
]
};- Liniendiagramm
var option = {
title: {
text: '饼图'
},
series: [
{
name: '系列1',
type: 'pie',
radius: '55%',
data: [
{value: 10, name: '类别1'},
{value: 20, name: '类别2'},
{value: 30, name: '类别3'}
]
}
]
};- V. Zusammenfassung
var option = {
title: {
text: '折线图'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['类别1', '类别2', '类别3']
},
yAxis: {},
series: [
{
name: '系列1',
type: 'line',
data: [10, 20, 30]
}
]
};Das obige ist der detaillierte Inhalt vonSo kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!