Comment obtenir les données spécifiques d'un graphique à tarte via la méthode eCharts 'getzr (). Sur (' click ')?

ECHARTS PIE TIE CLIC Cliquez sur Événement: Obtenez des données précises

Lors de la création de graphiques à tarte avec Echarts, il n'est pas facile d'obtenir des données directement à l'aide de getZr().on('click') . target d'un événement de clic renvoie généralement un objet PiePiece plutôt qu'une valeur de données directe. Cet article expliquera en détail comment obtenir efficacement les données de clic d'un graphique à secteurs.

Analyse des problèmes

getZr().on('click') capture l'événement de clic, mais l'objet PiePiece retourné ne contient que des informations d'index telles que dataIndex et seriesIndex , et ne peut pas accéder directement aux données. myChart.containPixel() est utilisée pour déterminer si la position de clic est dans la zone du graphique, mais ses paramètres de paramètres sont relativement compliqués, ce qui peut facilement conduire à des erreurs de jugement.

Solution

1. Combinez dataIndex et seriesIndex pour obtenir des données:

   dataIndex et seriesIndex de PiePiece indiquent respectivement l'index des données de la série correspondante. Nous pouvons utiliser ces index pour extraire les données de l'objet option de l'instance Echarts.

    myChart.getzr (). sur ('click', fonction (params) {
       LET DATAINDEX = PARAMS.Target.DatainDEX;
       LETSE SERRIESIndex = params.target.seriesIndex;
   
       if (dataindex! == Undefined && seriesIndex! == Undefined) {
           Laissez Data = MyChart.GetOption (). Series [SeriesIndex] .Data [DatainDEX];
           Console.log ('Clicked Data:', Data);
       }
   });

2. Utiliser containPixel pour déterminer avec précision la position de clic:

   Le premier paramètre de la méthode myChart.containPixel() n'est pas une simple 'grid' , mais nécessite un objet contenant seriesIndex pour spécifier la série à vérifier.

    myChart.getzr (). sur ('click', fonction (params) {
       let pointInpixel = [params.offsetx, params.offSety];
       LETSE SERRIESIndex = params.target.seriesIndex; // Obtenez l'index de la série if (myChart.ContainPixel ({seriesIndex: [SeriesIndex]}, PointInpixel)) {
           // ... (ici, nous utilisons le code à l'étape 1 pour obtenir les données) ...
       }
   });

3. Manipulation des graphiques à secteurs multi-anneaux:

   Pour un graphique à secteurs multi-anneaux, seriesIndex indique quel anneau est cliqué. Le code ci-dessus peut gérer correctement cette situation, utilisez simplement seriesIndex directement.

Grâce à la méthode ci-dessus, nous pouvons extraire avec précision les données requises de l'événement de clic du graphique à tarte Echarts. N'oubliez pas que l'utilisation correcte de containPixel est cruciale pour améliorer la précision des événements de clic. Assurez-vous que seriesIndex est correctement récupéré et utilisé pour containPixel et l'accès aux 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!