La bibliothèque de visualisation ECharts offre une grande flexibilité pour l'affichage de données. Au-delà des interactions classiques de survol sur des éléments de série spécifiques, il est souvent nécessaire de détecter la position de la souris sur l'ensemble du canevas du graphique et de récupérer les données d'axe correspondantes. Cet article explique comment y parvenir, en particulier pour extraire des infromations d'une zone "grise" (neutre) du graphique.
1. Configuration Initiale d'un Graphique ECharts
Pour permetre une interaction étendue avec le canevas, il est crucial de s'assurer que l'instance ECharts est configurée pour déclencher des événements sur le canevas global via sa propriété ZRender. Voici un exemple de configuration pour un graphique combinant des barres et une ligne, utilisant deux axes Y distincts :
const chartInstance = echarts.init(document.getElementById('myChartContainer'));
chartInstance.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['Transaction Réussie', 'Refus de Paiement', 'Remboursement', 'Taux de Refus'],
bottom: 0
},
calculable: true,
// Active les événements sur le canevas ZRender
triggerEvent: true,
xAxis: [
{
type: 'category',
data: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil'], // Données d'exemple
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Quantité',
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
{
type: 'value',
name: 'Taux (%)',
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
],
series: [
{
name: 'Transaction Réussie',
type: 'bar',
barWidth: '15%',
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: '#4CAF50' // Vert
},
data: [200, 300, 250, 400, 350, 450, 380], // Données d'exemple
yAxisIndex: 0
},
{
name: 'Refus de Paiement',
type: 'bar',
barWidth: '15%',
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: '#F44336' // Rouge
},
data: [10, 15, 8, 20, 12, 18, 14], // Données d'exemple
yAxisIndex: 0
},
{
name: 'Remboursement',
type: 'bar',
barWidth: '15%',
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: '#FFC107' // Jaune
},
data: [5, 7, 3, 10, 6, 9, 7], // Données d'exemple
yAxisIndex: 0
},
{
name: 'Taux de Refus',
type: 'line',
smooth: true,
yAxisIndex: 1,
itemStyle: {
color: '#2196F3' // Bleu
},
data: [5, 4.8, 3.2, 5.0, 3.4, 4.0, 3.7] // Données d'exemple
}
]
});
2. Récupération des Données d'Axe au Survol
Pour capturer les événements de souris sur l'ensemble du canevas du graphique (la zone ZRender), nous utilisons la méthode getZr() de l'instance ECharts, puis y attachons un écouteur d'événement. L'événement mousemove est idéal pour le survol.
La clé est d'utiliser convertFromPixel pour transformer les coordonnées de l'écran (pixels) en coordonnées de données du graphique. Cela nous permet d'identifier quelle catégorie de l'axe X correspond à la position actuelle de la souris.
const externalDataSet = [ // Simulation de données venant d'un backend
{ category: 'Jan', successCount: 200, country: 'France' },
{ category: 'Fév', successCount: 300, country: 'Allemagne' },
{ category: 'Mar', successCount: 250, country: 'Espagne' },
{ category: 'Avr', successCount: 400, country: 'Italie' },
{ category: 'Mai', successCount: 350, country: 'Royaume-Uni' },
{ category: 'Juin', successCount: 450, country: 'Suisse' },
{ category: 'Juil', successCount: 380, country: 'Belgique' }
];
let currentHoveredData = []; // Pour stocker les données filtrées
chartInstance.getZr().on('mousemove', (params) => {
// Coordonnées du pointeur de la souris en pixels
const pixelCoords = [params.offsetX, params.offsetY];
// Convertit les coordonnées pixel en coordonnées de grille/données
// L'index de série (ici 0) est utilisé comme référence pour la conversion
const dataCoords = chartInstance.convertFromPixel({ seriesIndex: 0 }, pixelCoords);
// dataCoords[0] est l'index de la catégorie sur l'axe X
const xAxisDataIndex = dataCoords[0];
// Récupère les options actuelles du graphique pour accéder aux données de l'axe X
const currentOptions = chartInstance.getOption();
// Vérifie si l'index est valide pour l'axe X
if (xAxisDataIndex >= 0 && xAxisDataIndex < currentOptions.xAxis[0].data.length) {
const categoryLabel = currentOptions.xAxis[0].data[xAxisDataIndex];
// Filtre les données externes en fonction de l'étiquette de catégorie
currentHoveredData = externalDataSet.filter(item => item.category === categoryLabel);
// Exemple d'action : afficher les données dans la console ou les mettre à jour dans l'interface utilisateur
console.log(`Données associées à la catégorie "${categoryLabel}" :`, currentHoveredData);
// Ici, vous pourriez déclencher une mise à jour d'un composant Vue/React/Angular
// ou afficher une infobulle personnalisée en dehors d'ECharts.
} else {
// La souris est en dehors de la zone de données valide de l'axe X
currentHoveredData = [];
console.log("Souris en dehors des catégories de l'axe X.");
}
});
3. Comprendre getZr() et convertFromPixel()
chartInstance.getZr(): Cette méthode retourne l'instance ZRender sous-jacente au graphique ECharts. ZRender est la bibliothèque de rendu graphique utilisée par ECharts. En attachant des écouteurs d'événements à l'instance ZRender, vous pouvez interagir avec l'ensemble du canevas du graphique, et non pas seulement avec les éléments graphiques spécifiques (barres, points de ligne, etc.) d'une série. Cela permet de détecter des événements dans les "zones grises" ou vides du graphique.chartInstance.convertFromPixel({ seriesIndex: 0 }, pixelCoords): Cette fonction est essentielle pour la cartographie des coordonnées. Elle prend des coordonnées en pixels ([offsetX, offsetY]) et les convertit en coordonnées de données relatives à un système de grille spécifique. Le paramètre{ seriesIndex: 0 }indique le système de coordonnées de la première série, ce qui est souvent suffisant pour récupérer l'index de l'axe X pour un graphique à catégories. Le résultat est un tableau, où le premier élément (dataCoords[0]) représente l'index de la catégorie sur l'axe X.
4. Gestion du Contexte this avec les Fonctions Fléchées
Dans l'exemple ci-dessus, une fonction fléchée ((params) => { ... }) est utilisée pour l'écouteur d'événement mousemove. Ceci est une bonne pratique, en particulier dans les frameworks comme Vue.js ou React, car les fonctions fléchées ne créent pas leur propre contexte this. Elles héritent le this de leur contexte englobant (lexical). Si une fonction traditionnelle (function(params) { ... }) était utilisée, le this à l'intérieur de la fonction ferait référence à l'objet de l'événement ZRender, et non pas à l'instance du composant Vue ou à l'objet global où la logique est définie. L'utilisation d'une fonction fléchée garantit que this référence toujours ce que vous attendez.
5. Autres Événements de Souris Pris en Charge par ECharts / ZRender
En plus de mousemove, ZRender et ECharts supportent une variété d'autres événements de souris qui peuvent être liés de manière similaire pour des interactions diverses :
click: Clic de la souris.dblclick: Double-clic de la souris.mousedown: Bouton de la souris enfoncé.mouseup: Bouton de la souris relâché.mouseover: La souris entre dans une zone.mouseout: La souris quitte une zone.globalout: La souris quitte l'ensemble du canevas ZRender.contextmenu: Clic droit (menu contextuel).
Ces événements peuvent être utilisés pour construire des interfaces utilisateur très réactives et interactives avec vos graphiques ECharts.