Introduction aux Styles dans ECharts

Cet article présente différentes méthodes de personnalisation visuelle dans ECharts. Bien que ces approches puissent parfois se recouper (un même effet visuel pouvant être obtenu par différentes techniques), chacune possède ses cas d'usage préférentiels.

Les principales approches de style

• Thèmes de couleur
• Palettes de couleurs
• Configuration directe des styles (itemStyle, lineStyle, areaStyle, label, etc.)
• Mappage visuel (visualMap)

Thèmes de couleur

Les thèmes de couleur ont déjà été traités dans un article précédent. Pour plus d'informations sur leur implémenattion, veuillez consulter les articles pertinents.

Palettes de couleurs

Les palettes de couleurs peuvent être définies dans la configuration option. Elles fournissent un ensemble de couleurs à partir desquels les graphiques et séries sélectionnent automatiquement leurs couleurs. Il est possible de définir une palette globale ou une palette spécifique à chaque série.

const configuration = {
   // Palette de couleurs globale.
   palette: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
   
   series: [{
       type: 'barre',
       // Palette spécifique à cette série.
       palette: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
       ...
   }, {
       type: 'camembert',
       // Palette spécifique à cette série.
       palette: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
       ...
   }]
};

Configuration directe des styles

La configuration directe des styles est une méthode couramment utilisée. Tout au long de la configuration d'ECharts, de nombreux éléments permettent de définir itemStyle, lineStyle, areaStyle, label, etc. Ces paramètres contrôlent directement la couleur des éléments graphiques, l'épaisseur des lignes, la taille des points, le texte des étiquettes, etc.

Généralement, les différentes séries et composants d'ECharts suivent ces conventions de nommage, bien que itemStyle, label, etc. puissent apparaître à différents endroits selon les graphiques et composants.

Pour une autre introduction sur la configuration directe des styles, consultez l'article sur la personnalisation des styles des graphiques.

Styles de surbrillance : emphasis

Lorsque la souris survole un élément graphique, un style de surbrillance apparaît généralement. Par défaut, ce style est généré automatiquement à partir du style normal. Cependant, il est possible de définir manuellement le style de surbrillance principalement via la propriété emphasis. La structure de emphasis est identique à celle des styles normaux, par exemple :

const configuration = {
   series: {
       type: 'nuage de points',

       // Style normal.
       itemStyle: {
           // Couleur des points.
           color: 'rouge'
       },
       label: {
           show: true,
           // Texte de l'étiquette.
           formatter: 'Ceci est une étiquette normale.'
       },

       // Style de surbrillance.
       emphasis: {
           itemStyle: {
               // Couleur des points lors de la surbrillance.
               color: 'bleu'
           },
           label: {
               show: true,
               // Texte de l'étiquette lors de la surbrillance.
               formatter: 'Ceci est une étiquette de surbrillance.'
           }
       }
   }
}

Note : Dans ECharts4 et les versions antérieures, la syntaxe pour les styles de surbrillance et normaux était la suivante :

const configuration = {
   series: {
       type: 'nuage de points',

       itemStyle: {
           // Style normal.
           normal: {
               // Couleur des points.
               color: 'rouge'
           },
           // Style de surbrillance.
           emphasis: {
               // Couleur des points lors de la surbrillance.
               color: 'bleu'
           }
       },

       label: {
           // Style normal.
           normal: {
               show: true,
               // Texte de l'étiquette.
               formatter: 'Ceci est une étiquette normale.'
           },
           // Style de surbrillance.
           emphasis: {
               show: true,
               // Texte de l'étiquette lors de la surbrillance.
               formatter: 'Ceci est une étiquette de surbrillance.'
           }
       }
   }
}

Cette syntaxe reste compatible, mais n'est plus recommandée. En effet, dans la plupart des cas, les utilisateurs ne configurent que les styles de l'état normal et utilisent les styles de surbrillance par défaut. Dans ECharts4, la prise en charge de la méthode de configuration sans normal (comme dans la première syntaxe présentée) a été ajoutée, rendant la configuration plus plate et simple.

Définition des styles via le cmoposant visualMap

Le composant visualMap permet de spécifier des règles de mappage entre les données et les attributs visuels tels que la couleur ou la taille des graphiques. Pour plus de détails, reportez-vous à la documentation sur le mappage visuel des données.

// Exemple de configuration visualMap
const visualMapConfig = {
   min: 0,
   max: 100,
   dimension: 0,
   inRange: {
       color: ['#50a3ba', '#eac736', '#d94e5d']
   }
};