Erstellen Sie einfach statistische Diagramme mit Etiketten und Legenden unter Verwendung von Echarts in Kombination mit der PHP -Schnittstelle

Generieren Sie statistische Diagramme mit Etiketten und Legenden mit Echarts und PHP -Schnittstellen

Mit der Entwicklung der Internet-Technologie ist die Datenvisualisierung zu einem unverzichtbaren Bestandteil der Datenanalyse und der Entscheidungsunterstützung geworden. Statistische Diagramme als intuitive und leicht verständliche Anzeigemethode wurden häufig verwendet. Echarts ist eine leistungsstarke und Open -Source -Diagrammbibliothek mit reichhaltigen Diagrammtypen und -funktionen und wird von Entwicklern weit verbreitet.

In diesem Artikel werden spezifische Beispiele kombiniert, um zu erklären, wie Echarts und PHP -Schnittstellen verwendet werden, um statistische Diagramme mit Etiketten und Legenden zu generieren.

Führen Sie Echarts -Ressourcendateien ein

Zunächst müssen die Echarts-bezogenen Ressourcen in das Projekt eingeführt werden. Sie können die neueste Version von der offiziellen Website oder GitHub erhalten, sie in das Projektverzeichnis platzieren und die entsprechenden JS- und CSS -Dateien in HTML vorstellen.

Daten vorbereiten

Auf der PHP-Seite werden die Daten normalerweise über Datenbankabfrage oder API aufgerufen und dann für die Front-End-Verwendung in das JSON-Format konvertiert. Die Beispieldaten sind wie folgt:

 $data = [
    ['name' => 'Legende1', 'value' => 100],
    ['name' => 'Legende2', 'value' => 200],
    ['name' => 'Legende3', 'value' => 300],
    // ...
];

Erstellen Sie einen Diagrammbehälter

Erstellen Sie in der HTML -Datei ein Containerelement, um das Diagramm anzuzeigen:

 <div id="chart" style="width: 600px; height: 400px;"></div>

Echarts initialisieren und Diagramme zeichnen

Initialisieren Sie als nächstes die Echarts -Instanz über JavaScript Code und konfigurieren Sie das Diagramm:

 // EingeführtEChartsBibliothek
import echarts from 'echarts';

// Holen Sie sich Containerelemente
var chartContainer = document.getElementById('chart');

// InitialisierungEChartsBeispiel
var chart = echarts.init(chartContainer);

// Legen Sie die Konfigurationselemente und Daten des Diagramms fest
var option = {
    title: {
        text: 'Statistische Diagramme',
        subtext: 'Datenquelle: PHPSchnittstelle',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: <?=json_encode(array_column($data, 'name'))?>,
    },
    series: [
        {
            name: 'Tagname',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: <?=json_encode($data)?>,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

// Zeigen Sie Diagramme anhand der von Ihnen gerade angegebenen Konfigurationselemente und Daten an
chart.setOption(option);

Implementierungseffektanalyse

Stellen Sie im Code zuerst die Echarts -Bibliothek ein und erstellen Sie den Diagrammbehälter und erstellen Sie dann eine Diagramminstanz über echarts.init () . Das Optionsobjekt definiert den Titel, den Eingabeaufforderungbox, die Legende und die Datenreihe des Diagramms. Hier werden die Kreisdiagramme verwendet und die Beschriftungen und Legenden werden über die dynamischen Daten über die PHP -Schnittstelle angezeigt.

Rufen Sie schließlich die Methode SetOption () auf, um die Darstellung des Diagramms zu vervollständigen.

Zusammenfassen

Die Hauptschritte zur Implementierung statistischer Diagramme basierend auf Echarts und PHP -Schnittstellen:

• Echarts -Ressourcendateien einführen;
• Bereiten und konvertieren Sie Diagrammdaten in das JSON -Format.
• Erstellen Sie HTML -Elemente des Diagrammbehälters.
• Schreiben Sie JavaScript -Code, um Diagramme zu initialisieren und zu konfigurieren.
• Rufen Sie die Methode setOption () auf, um das Diagramm zu zeichnen.

In den oben genannten Schritten können Sie vielfältigere und reichhaltigere statistische Grafiken entsprechend Ihren Anforderungen zur Verbesserung der Datenanzeigeeffekt und der Benutzererfahrung anpassen. Ich hoffe, dieser Artikel wird für Ihr Datenvisualisierungsprojekt hilfreich sein.