Graphique circulaire ECharts

Dans les chapitres précédents, nous avons appris à utiliser ECharts pour dessiner un graphique à barres simple. Dans ce chapitre, nous allons dessiner un graphique circulaire.

Un graphique circulaire utilise principalement l'arc des secteurs pour montrer la proportion des données de différentes catégories dans le total. Son format de données est plus simple que celui d'un graphique à barres, avec uniquement des valeurs unidimensionnelles, et aucune catégorie n'est nécessaire. Comme il n'est pas sur un système de coordonnées cartésiennes, xAxis et yAxis ne sont pas non plus nécessaires.

Exemple

myChart.setOption({ series : [ { name: 'Source de trafic', type: 'pie', //Définir le type de graphique sur un graphique circulaire radius: '55%', //Le rayon du graphique circulaire : le rayon extérieur est de 55% de la taille de la zone visible (la plus petite dimension entre la hauteur et la largeur du conteneur). data:[ //Tableau de données, où name est le nom de l'élément de données et value est la valeur de l'élément de données. {value:235, name:'Annonce vidéo'}, {value:274, name:'Annonce d'affiliation'}, {value:310, name:'Marketing par e-mail'}, {value:335, name:'Accès direct'}, {value:400, name:'Moteur de recherche'} ] } ] })

Essayez-le vous-même »

Nous pouvons également, en définissant des paramètres,roseType: 'angle'afficher le diagramme circulaire sous forme de diagramme de Nightingale.

Exemple

option = { series : [ { name: 'Source de trafic', type: 'pie', radius: '55%', roseType: 'angle', data:[ {value:235, name:'Publicité vidéo'}, {value:274, name:'Annonce d'affiliation'}, {value:310, name:'Marketing par e-mail'}, {value:335, name:'Accès direct'}, {value:400, name:'Moteur de recherche'} ] } ] };

Essayez-le vous-même »

Configuration des ombres

Le paramètre itemStyle peut définir des éléments tels que l'ombre, la transparence, la couleur, la couleur de bordure, la largeur de bordure, etc. :

Exemple

option = { series : [ { name: 'Source de trafic', type: 'pie', radius: '55%', data:[ {value:235, name:'Publicité vidéo'}, {value:274, name:'Publicité d'affiliation'}, {value:310, name:'Marketing par e-mail'}, {value:335, name:'Accès direct'}, {value:400, name:'Moteur de recherche'} ], roseType: 'angle', itemStyle: { normal: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };

Essayez-le vous-même »
autres extensions