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>

   Nach dem Login kopieren

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>

   Nach dem Login kopieren

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'));

   Nach dem Login kopieren

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' }
                    ]
                }
            ]
        }
    ]
   };

   Nach dem Login kopieren

   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

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);

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>

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!