ECharts-Baumdiagramm: So zeigen Sie die hierarchische Datenstruktur an

ECarts-Baumdiagramm: Für die Anzeige der Datenhierarchiestruktur sind spezifische Codebeispiele erforderlich.

Einführung: Mit der rasanten Entwicklung der Datenvisualisierung haben sich auch das Verständnis und die Analysefähigkeiten der Menschen für Daten verbessert. Als häufig verwendete Datenvisualisierungsmethode kann das ECharts-Baumdiagramm die hierarchische Struktur von Daten intuitiv darstellen. In diesem Artikel wird die grundlegende Verwendung von ECharts-Baumdiagrammen vorgestellt und spezifische Codebeispiele gegeben.

1. Einführung in ECharts-Baumdiagramme
ECharts ist eine von Baidu entwickelte JavaScript-basierte Front-End-Diagrammbibliothek, die umfangreiche Datenvisualisierungseffekte wie verschiedene Diagramme und Karten bereitstellen kann. Das ECharts-Baumdiagramm ist eines seiner Kerndiagramme, das zur Darstellung der hierarchischen Beziehung von Daten verwendet wird und für Szenarien wie Organisationsstruktur und Klassifizierungsbeziehungen geeignet ist.

2. Grundlegende Verwendung des ECharts-Baumdiagramms

1. Einführung in die ECharts-Bibliothek
   Um das ECharts-Baumdiagramm zu verwenden, müssen Sie zunächst die ECharts-Bibliothek in der HTML-Datei vorstellen. Dies kann durch den folgenden Code erreicht werden:

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>

2. Erstellen Sie einen Container.
   Erstellen Sie einen Container zur Anzeige des Baumdiagramms in der HTML-Datei, zum Beispiel:

   <div id="tree-chart" style="width: 800px; height: 600px;"></div>

3. Initialisieren Sie die ECharts-Instanz.
   In der JavaScript-Datei erstellen Erstellen Sie mithilfe der folgenden Codeinstanz ein ECharts und binden Sie es an den Container:

   var treeChart = echarts.init(document.getElementById('tree-chart'));

4. Konfigurieren von Treemap-Parametern
   Geben Sie Parameter wie Daten und Stil über ECharts-Konfigurationselemente an. Das Folgende ist ein einfaches Beispiel:

   var option = {
    series: [
        {
            type: 'tree',
            data: [
                {
                    name: 'A',
                    children: [
                        {
                            name: 'B',
                            children: [
                                { name: 'C' },
                                { name: 'D' }
                            ]
                        },
                        { name: 'E' }
                    ]
                }
            ]
        }
    ]
   };

   Unter diesen wird der Parameter data verwendet, um die Daten der Baumkarte anzugeben. Jeder Knoten besteht aus den Attributen name und children, die den Knotennamen darstellen, und children stellt die Auflistung der untergeordneten Elemente dar Knoten. data参数用于指定树图的数据。每个节点由name和children属性组成，name表示节点名称，children表示子节点的集合。

5. 渲染树图
   最后，通过调用ECharts实例的setOption

Rendern der Baumkarte

Abschließend wird die Baumkarte auf der Seite gerendert, indem die setOption-Methode der ECharts-Instanz aufgerufen und die Parameter des Konfigurationselements übergeben werden:

treeChart.setOption(option);

3 . Beispieldemonstration

Betrachten Sie ein einfaches Organisationsbaumdiagramm mit dem folgenden Code:

    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>


    <div id="tree-chart" style="width: 800px; height: 600px;"></div>
    <script>
        var treeChart = echarts.init(document.getElementById('tree-chart'));

        var option = {
            series: [
                {
                    type: 'tree',
                    data: [
                        {
                            name: 'CEO',
                            children: [
                                {
                                    name: 'CTO',
                                    children: [
                                        { name: 'Engineer' },
                                        { name: 'Designer' }
                                    ]
                                },
                                {
                                    name: 'CFO',
                                    children: [
                                        { name: 'Accountant' },
                                        { name: 'Treasury' }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        treeChart.setOption(option);
    </script>

Im obigen Code haben wir ein einfaches Organisationsbaumdiagramm erstellt. Der Wurzelknoten ist CEO und enthält zwei Unterknoten, CTO und CFO. Unter dem CTO-Knoten gibt es zwei Unterknoten, Engineer und Designer. Unter dem CFO-Knoten gibt es zwei Unterknoten, Accountant und Treasury. Mit dem obigen Code können wir ein Baumdiagramm erhalten, das die Organisationsstruktur zeigt. 🎜🎜Fazit: 🎜Dieser Artikel stellt die grundlegende Verwendung des ECharts-Baumdiagramms vor und gibt ein Beispiel. Durch die Konfigurationselemente von ECharts können wir die Daten und den Stil der Baumkarte flexibel definieren, um die Anzeigeanforderungen auf Datenebene in verschiedenen Szenarien zu erfüllen. Ich hoffe, dass dieser Artikel den Lesern helfen kann, ECharts-Baumdiagramme zu verstehen und zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonECharts-Baumdiagramm: So zeigen Sie die hierarchische Datenstruktur an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!