Echartsパイチャートクリックイベント：正確なデータを取得します

Echartsを使用してPIEチャートを作成する場合、 getZr().on('click')を使用してデータを直接取得するのは簡単ではありません。クリックイベントのtargetプロパティは、通常、直接データ値ではなくPiePieceオブジェクトを返します。この記事では、パイチャートのクリックデータを効果的に取得する方法について詳しく説明します。

問題分析

getZr().on('click')はクリックイベントをキャプチャしますが、返されたPiePieceオブジェクトにはdataIndexやseriesIndexなどのインデックス情報のみが含まれており、データに直接アクセスできません。 myChart.containPixel()メソッドは、クリック位置がチャート領(lǐng)域にあるかどうかを判斷するために使用されますが、そのパラメーター設(shè)定は比較的複雑であり、判斷エラーに簡単につながる可能性があります。

解決

1. dataIndexとseriesIndexを組み合わせてデータを取得します。

   PiePieceオブジェクトのdataIndexとseriesIndex 、それぞれ対応するシリーズのデータ??のインデックスを示しています。これらのインデックスを使用して、Echartsインスタンスのoptionオブジェクトからデータを抽出できます。

    mychart.getzr（）。on（ 'click'、function（params）{
       let dataindex = params.target.dataindex;
       let seriesindex = params.target.seriesindex;
   
       if（dataindex！== undefined && seriesindex！== undefined）{
           let data = mychart.getoption（）。シリーズ[seriesindex] .data [dataindex];
           console.log（ 'クリックしたデータ：'、data）;
       }
   }）;

2. containPixel使用して、クリック位置を正確に決定します。

   myChart.containPixel()メソッドの最初のパラメーターは単純な'grid'ではありませんが、 seriesIndex屬性を含むオブジェクトが必要とするオブジェクトが必要です。

    mychart.getzr（）。on（ 'click'、function（params）{
       let pointinpixel = [params.offsetx、params.offsety];
       let seriesindex = params.target.seriesindex; //シリーズインデックスを取得if（mychart.containpixel（{seriesindex：[seriesindex]}、pointinpixel））{
           // ...（ここでは、ステップ1のコードを使用してデータを取得します）...
       }
   }）;

3. マルチリングパイチャートの処理：

   マルチリングパイチャートの場合、 seriesIndexどのリングがクリックされているかを示します。上記のコードはこの狀況を正しく処理できます。SeriesIndex seriesIndex直接使用するだけです。

上記の方法を使用して、Echartsパイチャートのクリックイベントから必要なデータを正確に抽出できます。 containPixelの正しい使用は、クリックイベントの精度を向上させるために重要であることを忘れないでください。 seriesIndexが適切にフェッチされ、 containPixelとデータアクセスに使用されることを確認してください。

以上がEchartsのgetzr（）。on（ 'click'）メソッドを介してパイチャートの特定のデータを取得するにはどうすればよいですか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。