Graphique circulaire ECharts (anneau) : comment afficher la proportion des données et les changements structurels
ECharts est une bibliothèque de visualisation de données basée sur JavaScript qui fournit une variété de types de graphiques, notamment des graphiques linéaires, des graphiques à barres et des nuages de points, des cartes , etc. Parmi eux, les diagrammes circulaires sont un type de graphique couramment utilisé qui peut être utilisé pour afficher la proportion et les changements structurels des données. Cet article explique comment utiliser les diagrammes circulaires ECharts pour afficher les proportions de données et les changements structurels, et fournit des exemples de code spécifiques.
1. Format des données
Avant d'utiliser le diagramme circulaire ECharts, vous devez préparer les données et convertir le format des données au format requis par ECharts. Dans un diagramme circulaire, le format des données adopte généralement la méthode suivante :
1 2 3 4 5 6 |
|
où nom représente le nom des données et valeur représente la valeur des données. Il convient de noter que la valeur des données est généralement de type numérique. S'il s'agit d'un type de chaîne, elle doit être convertie à l'aide de parseInt() ou de parseFloat().
2. Diagramme circulaire de base
Ce qui suit montre comment utiliser ECharts pour dessiner un diagramme circulaire de base. Tout d’abord, vous devez présenter la bibliothèque et le thème ECharts, créer un élément DOM pour afficher le graphique et initialiser une instance ECharts. Ensuite, définissez la configuration de base du diagramme circulaire, notamment le titre, la légende, la couleur, etc. Enfin, les données sont transmises au diagramme circulaire pour le rendu.
Code HTML :
1 |
|
Code JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
|
Dans le code ci-dessus, le titre du graphique, les astuces sur les données, la légende, le rayon du diagramme circulaire, les données, etc. sont définis. L'effet du diagramme circulaire est le suivant :
3. Le graphique à secteurs est une variante du graphique à secteurs de base dans lequel le centre du graphique à secteurs est creusé pour former une figure en forme de beignet. Dans ECharts, vous pouvez définir la propriété innerRadius du diagramme circulaire pour obtenir cet effet. L'exemple ci-dessous montre comment dessiner un diagramme circulaire en forme de beignet à l'aide d'ECharts.
Code HTML :
1 |
|
Code JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
|
Le code ci-dessus est presque le même que le code du diagramme circulaire de base, sauf que la propriété innerRadius est définie dans la série. L'effet de ce diagramme circulaire est le suivant :
Quatre changements dans la structure des données
. tarte En plus d'afficher la proportion de données, les graphiques peuvent également être utilisés pour montrer les changements dans la structure des données. Dans ECharts, cet effet peut être obtenu en modifiant et en restituant les données. L'exemple suivant montre comment utiliser les données dans un diagramme circulaire pour afficher l'effet des modifications apportées à la structure des données.
Code HTML :
1 |
|
Code JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
|
Dans le code ci-dessus, nous définissons deux sources de données data1 et data2, qui représentent respectivement deux structures de données différentes. Un événement de clic est configuré dans le graphique à secteurs. Lorsque le graphique à secteurs est cliqué, il sera jugé en fonction du nom des données cliquées. Si le clic correspond à la donnée 1 dans data1, les données de la légende et de la série seront modifiées en data2. structure de données, sinon modifiez-la en structure de données data1. Enfin, appelez la méthode setOption() pour restituer le graphique modifié. L'effet de ce changement de structure de données est illustré dans la figure ci-dessous :
En résumé, cet article présente comment utiliser ECharts, dessine des diagrammes circulaires et fournit des exemples de code spécifiques. En plus des diagrammes circulaires et des diagrammes circulaires de base, il montre également comment exploiter les données dans les diagrammes circulaires pour afficher les effets des modifications de la structure des données. Les lecteurs peuvent apporter les modifications et optimisations correspondantes en fonction de leurs propres besoins et formats de 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!