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
<!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>
Erstellen Sie eine Diagramminstanz
var chart = echarts.init(document.getElementById('chart'));Diagrammparameter 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
chart.setOption(option);
Back-End-Datenverarbeitung
$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
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
var option = {
title: {
text: '条形图'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3']
},
series: [
{
name: '系列1',
type: 'bar',
data: [10, 20, 30]
}
]
};var option = {
title: {
text: '饼图'
},
series: [
{
name: '系列1',
type: 'pie',
radius: '55%',
data: [
{value: 10, name: '类别1'},
{value: 20, name: '类别2'},
{value: 30, name: '类别3'}
]
}
]
};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!
