Comment utiliser un treemap rectangulaire pour afficher la hiérarchie des données dans ECharts

Comment utiliser un treemap rectangulaire pour afficher la structure hiérarchique des données dans ECharts

Introduction :
Dans la visualisation de données, un treemap rectangulaire est un type de graphique très courant, qui affiche la structure hiérarchique des données sous la forme d'un rectangle Autoriser les utilisateurs. pour comprendre et analyser intuitivement les données. ECharts est une puissante bibliothèque de visualisation de données qui fournit une variété de types de graphiques et d'éléments de configuration flexibles, facilitant l'affichage d'arborescences rectangulaires. Cet article présentera en détail comment utiliser un diagramme arborescent rectangulaire pour afficher la structure hiérarchique des données dans ECharts et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer, vous devez vous assurer qu'ECharts a été installé et que les fichiers de ressources nécessaires ont été introduits. Les étapes spécifiques sont les suivantes :

1. Téléchargez ECharts : Accédez au site officiel d'ECharts (http://echarts.apache.org/zh/index.html) pour télécharger la dernière version du package compressé ECharts.
2. Décompressez le package compressé : décompressez le package compressé téléchargé et vous obtiendrez un répertoire echarts-x.x.x.
3. Introduire les fichiers de ressources : copiez le fichier echarts.min.js du répertoire echarts-x.x.x dans le répertoire du projet et introduisez le fichier de ressources dans le fichier HTML.

2. Créer une carte arborescente rectangulaire
Le processus de création d'une carte arborescente rectangulaire dans ECharts est principalement divisé en les étapes suivantes :

1. Créer un conteneur : Ajoutez un conteneur div dans le fichier HTML pour héberger l'arborescence rectangulaire générée. carte . Par exemple, vous pouvez ajouter le code suivant dans la balise  :

2. Initialisation instance : dans Créez une instance ECharts dans le fichier JavaScript et liez-la au conteneur spécifié. Par exemple, vous pouvez ajouter le code suivant dans la balise <script> : </script>

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

3. Configurer les données : Préparez les données à afficher et configurez-le selon vos besoins. Organisez-vous. Par exemple, un objet de données peut être défini comme suit :

var data = {
nom : 'root node',
enfants : [

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

]
} ;

4. Options de configuration : définir diverses options d'arborescence rectangulaire , y compris la mise en page, le style, l'interaction, etc. Pour des éléments de configuration spécifiques, veuillez vous référer à la documentation officielle d'ECharts (http://echarts.apache.org/zh/option.html). Par exemple, la mise en page peut être définie comme suit :

var option = {
series: {

type: 'treemap',
data: [data]

}
};

5. Rendu du graphique : appliquez l'élément de configuration au graphique en appelant la méthode setOption du Instance ECharts et Rendre un treemap rectangulaire. Par exemple, vous pouvez ajouter le code suivant :

chart.setOption(option);

3. Exemple de code
Ce qui suit est un exemple de code complet pour afficher un arbre rectangulaire simple dans ECharts :

< ;script>
var chart = echarts.init(document.getElementById('chart'));

var data = {
nom : 'Root node',
enfants : [

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

]
};

var option = {
series : {

type: 'treemap',
data: [data]

}
};

chart.setOption(option);

Résumé
Grâce aux étapes ci-dessus, nous pouvons. créez et affichez facilement des diagrammes arborescents rectangulaires dans ECharts. En plus des éléments de configuration de base, ECharts fournit également des fonctions riches et des méthodes d'interaction flexibles qui peuvent être ajustées et étendues en fonction des besoins spécifiques. Dans le même temps, la documentation officielle fournit également des instructions et des exemples plus détaillés pour notre référence et notre apprentissage. J'espère que cet article pourra aider les lecteurs à démarrer rapidement avec les diagrammes arborescents rectangulaires et à obtenir un affichage intuitif de la hiérarchie des données.

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!