title: chart
icon: cuboidBloc graphique
Table des matières
Introduction
Ce bloc est une enveloppe autour de la bibliothèque EChart. Il permet de créer des graphiques en quelques lignes de code.
Il est possible de générer de nombreux graphiques différents : Examples - Apache ECharts.
Vue de l'éditeur :
La vue éditeur affiche des données d'exemple afin de ne pas afficher un graphique vide ou faire des requêtes inutiles.
Vue du rendu :
Configuration
Options du graphique
Les options du graphique sont définies dans un objet JSON. Pour plus d'informations, consultez la documentation officielle.
⚠ Attention : Les options des graphiques sont initialement écrites en JavaScript. Pour les utiliser dans ce bloc, il est nécessaire de les convertir en JSON donc toutes les fonctionnalités ne pourront pas être utilisées.
ℹ Information : Il n'est pas possible d'utiliser l'option
datasetcar elle est remplacée par les données récupérées par le bloc. Si vous souhaitez définir des données statiquement, il faudra utiliser la source statique.
Exemple :
{
"title": {
"text": "Répartition départementale",
"subtext": "Nombre de dossiers",
"left": "center",
"right": "auto",
"top": "auto",
"bottom": "0"
},
"legend": {
"orient": "vertical",
"right": 10,
"left": 10
},
"series": [
{
"name": "Répartition départementale",
"type": "pie",
"radius": "60%",
"itemStyle": {
"borderRadius": 10,
"borderColor": "#fff",
"borderWidth": 2
},
"emphasis": {
"itemStyle": {
"shadowBlur": 5,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.25)"
}
},
"encode": {
"itemName": "category",
"value": "Nombre",
"tooltip": [
"Nombre",
"Surface",
"Montant",
"Marge",
"Taux de marge"
]
},
"label": {
"formatter": "{b}\n{value|{d} %}",
"rich": {
"value": {
"color": "gray"
}
}
}
}
],
"toolbox": {
"feature": {
"saveAsImage": {
"right": 10
}
}
},
"tooltip": {
"show": true
}
}
Source des données
Il y a deux cas possibles pour définir les données du graphique :
-
Si le bloc graphique est dans un bloc de données alors, cette section affichera un message indiquant que les données sont récupérées par le bloc de données.
-
Si le bloc graphique est seul, alors il est possible de définir les données directement dans le bloc graphique. L'explication du processus est faite sur la page du bloc de données.
Dans les deux cas, des transformations peuvent être appliquées sur les données au moyen d'un middleware.
De même, il est possible d'obtenir un aperçu des données sous forme de tableau ou d'obtenir un perçu du graphique grâce aux boutons :
