Wie erhalte ich die spezifischen Daten eines Kreisdiagramms über Echarts 'Getezr (). Auf (' Click ') Methode?

Echarts Kreisdiagramm Klicken Sie auf Ereignis: Genauige Daten abrufen

Beim Erstellen von Kreisdiagrammen mit Echarts ist es nicht einfach, Daten mit getZr().on('click') direkt zu erhalten. target Zieleigenschaft eines Klickereignisses gibt normalerweise ein PiePiece -Objekt und nicht einen direkten Datenwert zurück. In diesem Artikel wird detailliert erläutert, wie Sie die Klick -Daten eines Kreisdiagramms effektiv erhalten.

Problemanalyse

getZr().on('click') erfasst das Klickereignis, das zurückgegebene PiePiece -Objekt enthält jedoch nur Indexinformationen wie dataIndex und seriesIndex und kann nicht direkt auf die Daten zugreifen. myChart.containPixel() wird verwendet, um festzustellen, ob sich die Klickposition im Diagrammbereich befindet. Die Parametereinstellungen sind jedoch relativ kompliziert, was leicht zu Urteilsfehlern führen kann.

Lösung

1. Kombinieren Sie dataIndex und seriesIndex um Daten zu erhalten:

   dataIndex und der seriesIndex PiePiece -Objekts geben den Index der Daten in der entsprechenden Serie an. Wir können diese Indizes verwenden, um Daten aus dem option der Echarts -Instanz zu extrahieren.

    mychart.getZr (). on ('klick', function (params) {
       let dataindex = params.target.dataindex;
       let sageIndex = params.target.seriesidex;
   
       if (dataindex! == undefined && SeriesIndex! == undefined) {
           let data = myChart.getOption (). Serie [SeriesIndex] .Data [dataindex];
           console.log ('angeklickt Daten:', Daten);
       }
   });

2. Verwendung containPixel , um die Position der Klickposition genau zu bestimmen:

   Der erste Parameter der Methode myChart.containPixel() ist kein einfaches 'grid' , erfordert jedoch ein Objekt, das seriesIndex -Attribut enthält, um die zu überprüfen zu prüfende Serie angeben.

    mychart.getZr (). on ('klick', function (params) {
       pointInpixel = [paramsSetX, params.offsety];
       let sageIndex = params.target.seriesidex; // Erhalten Sie den Serie -Index if (myChart.containpixel ({SeriesIndex: [SeriesIndex]}, PointInpixel) {
           // ... (Hier verwenden wir den Code in Schritt 1, um die Daten zu erhalten) ...
       }
   });

3. Umgang mit Multi-Ring-Kreisdiagrammen:

   Für ein Multi-Ring-Kreisdiagramm gibt seriesIndex an, auf welcher Ring geklickt wird. Der obige Code kann diese Situation korrekt behandeln. Verwenden Sie einfach seriesIndex direkt.

Über die obige Methode können wir die erforderlichen Daten aus dem Klickereignis des Echarts -Kreisdiagramms genau extrahieren. Denken Sie daran, dass die korrekte Verwendung von containPixel entscheidend ist, um die Genauigkeit von Klickereignissen zu verbessern. Stellen Sie sicher, dass seriesIndex ordnungsgemäß abgerufen und für containPixel und den Datenzugriff verwendet wird.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die spezifischen Daten eines Kreisdiagramms über Echarts 'Getezr (). Auf (' Click ') Methode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!