Bagaimana untuk mendapatkan data khusus carta pai melalui kaedah echarts 'getzr (). (' Klik ')?

Acara klik carta pai echarts: Dapatkan data yang tepat

Apabila membuat carta pai dengan echart, tidak mudah untuk mendapatkan data secara langsung menggunakan getZr().on('click') . Harta target acara klik biasanya mengembalikan objek PiePiece dan bukannya nilai data langsung. Artikel ini akan menerangkan secara terperinci bagaimana untuk mendapatkan data klik carta pai secara berkesan.

Analisis masalah

getZr().on('click') menangkap acara klik, tetapi objek PiePiece yang dikembalikan hanya mengandungi maklumat indeks seperti dataIndex dan seriesIndex , dan tidak dapat mengakses data secara langsung. Kaedah myChart.containPixel() digunakan untuk menentukan sama ada kedudukan klik berada di kawasan carta, tetapi tetapan parameternya agak rumit, yang boleh membawa kepada kesilapan penghakiman.

Penyelesaian

1. Gabungkan dataIndex dan seriesIndex untuk mendapatkan data:

   dataIndex dan seriesIndex objek PiePiece menunjukkan indeks data dalam siri yang sepadan. Kita boleh menggunakan indeks ini untuk mengekstrak data dari objek option contoh Echarts.

    myChart.getzr (). pada ('klik', fungsi (params) {
       biarkan dataindex = params.target.dataindex;
       biarkan siriIndex = params.target.seriesIndex;
   
       jika (DataAndex! == Undefined && SeriesIndex! == Undefined) {
           biarkan data = myChart.getOption (). Series [SeriesIndex] .data [DataAnDex];
           console.log ('Data diklik:', data);
       }
   });

2. Gunakan containPixel untuk menentukan kedudukan klik dengan tepat:

   Parameter pertama kaedah myChart.containPixel() bukanlah 'grid' yang mudah, tetapi memerlukan objek yang mengandungi atribut seriesIndex untuk menentukan siri yang akan diperiksa.

    myChart.getzr (). pada ('klik', fungsi (params) {
       biarkan pointInpixel = [params.offsetx, params.offsety];
       biarkan siriIndex = params.target.seriesIndex; // Dapatkan indeks siri jika (myChart.ContainPixel ({SeriesIndex: [SeriesIndex]}, pointInpixel)) {
           // ... (di sini kita menggunakan kod dalam langkah 1 untuk mendapatkan data) ...
       }
   });

3. Mengendalikan carta pai pelbagai cincin:

   Untuk carta pai pelbagai cincin, seriesIndex menunjukkan cincin yang diklik. Kod di atas boleh mengendalikan situasi ini dengan betul, hanya gunakan seriesIndex secara langsung.

Melalui kaedah di atas, kami dapat mengekstrak data yang diperlukan dengan tepat dari peristiwa klik carta pai Echarts. Ingat, penggunaan yang betul containPixel adalah penting untuk meningkatkan ketepatan peristiwa klik. Pastikan seriesIndex betul -betul diambil dan digunakan untuk containPixel dan akses data.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan data khusus carta pai melalui kaedah echarts 'getzr (). (' Klik ')?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!