Diagramme arborescent ECharts : comment afficher la structure hiérarchique des données

Diagramme arborescent ECharts : comment afficher la structure hiérarchique des données nécessite des exemples de code spécifiques

Introduction : Avec le développement rapide de la visualisation des données, les capacités de compréhension et d'analyse des données se sont également améliorées. En tant que méthode de visualisation de données couramment utilisée, l'arborescence ECharts peut afficher intuitivement la structure hiérarchique des données. Cet article présentera l'utilisation de base des diagrammes arborescents ECharts et donnera des exemples de code spécifiques.

1. Introduction à l'arborescence ECharts
ECharts est une bibliothèque de graphiques frontale basée sur JavaScript développée par Baidu, qui peut fournir de riches effets de visualisation de données tels que divers graphiques et cartes. L'arborescence ECharts est l'un de ses diagrammes principaux, utilisé pour afficher la relation hiérarchique des données et convient à des scénarios tels que la structure organisationnelle et les relations de classification.

2. Utilisation de base de l'arborescence ECharts

1. Présentation de la bibliothèque ECharts
   Pour utiliser l'arborescence ECharts, vous devez d'abord introduire la bibliothèque ECharts dans le fichier HTML. Ceci peut être réalisé par le code suivant :

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

2. Créer un conteneur
   Créer un conteneur pour afficher l'arborescence dans le fichier HTML, par exemple :

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

3. Initialiser l'instance ECharts
   Dans le fichier JavaScript, créer un ECharts par l'instance de code suivante et liez-le au conteneur :

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

4. Configuration des paramètres du treemap
   Spécifiez des paramètres tels que les données et le style via les éléments de configuration ECharts. Voici un exemple simple :

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

   Parmi eux, le paramètre data est utilisé pour spécifier les données de l'arborescence. Chaque nœud se compose des attributs name et children. name représente le nom du nœud et children représente la collection d'enfants. nœuds. data参数用于指定树图的数据。每个节点由name和children属性组成，name表示节点名称，children表示子节点的集合。

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

Rendu de l'arborescence

Enfin, en appelant la méthode setOption de l'instance ECharts et en passant les paramètres de l'élément de configuration, l'arborescence est rendue à la page :

treeChart.setOption(option);

3 . Exemple de démonstration

Considérons un diagramme d'arborescence organisationnelle simple avec le code suivant :

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

Dans le code ci-dessus, nous avons créé un diagramme d'arborescence organisationnelle simple. Le nœud racine est CEO et contient deux sous-nœuds, CTO et CFO. Sous le nœud CTO, il y a deux sous-nœuds Engineer et Designer. Sous le nœud CFO, il y a deux sous-nœuds Accountant et Treasury. Grâce au code ci-dessus, nous pouvons obtenir un diagramme arborescent montrant la structure organisationnelle. 🎜🎜Conclusion : 🎜Cet article présente l'utilisation de base de l'arborescence ECharts et donne un exemple. Grâce aux éléments de configuration d'ECharts, nous pouvons définir de manière flexible les données et le style de l'arborescence pour répondre aux exigences d'affichage au niveau des données dans divers scénarios. J'espère que cet article pourra aider les lecteurs à comprendre et à utiliser les arborescences ECharts. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!