Echarts 'getzr (). on ('Click ') 메소드를 통해 원형 차트의 특정 데이터를 얻는 방법?

Echarts Pie 차트 클릭 이벤트 : 정확한 데이터 가져 오기

Echarts로 Pie 차트를 만들 때 getZr().on('click') 사용하여 데이터를 직접 가져 오는 것은 쉽지 않습니다. 클릭 이벤트의 target 속성은 일반적으로 직접 데이터 값이 아닌 PiePiece 객체를 반환합니다. 이 기사는 파이 차트의 클릭 데이터를 효과적으로 얻는 방법을 자세히 설명합니다.

문제 분석

getZr().on('click') 클릭 이벤트를 캡처하지만 반환 된 PiePiece 객체에는 dataIndex 및 seriesIndex 와 같은 인덱스 정보 만 포함되며 데이터에 직접 액세스 할 수 없습니다. myChart.containPixel() 메소드는 클릭 위치가 차트 영역에 있는지 여부를 결정하는 데 사용되지만 매개 변수 설정은 비교적 복잡하여 판단 오류로 쉽게 이어질 수 있습니다.

해결책

1. dataIndex 및 seriesIndex 결합하여 데이터를 얻습니다.

   PiePiece 객체의 dataIndex 및 seriesIndex 각각 해당 시리즈의 데이터 인덱스를 나타냅니다. 이 인덱스를 사용하여 Echarts 인스턴스의 option 개체에서 데이터를 추출 할 수 있습니다.

    mychart.getzr (). on ( 'click', function (params) {
       dataindex = params.target.dataindex를하자;
       secileindex = params.target.seriesindex를하자;
   
       if (dataindex! == undefined && seriesindex! == undefined) {
           let data = mychart.getOption (). Series [SeriesIndex] .data [dataindex];
           Console.log ( '클릭 데이터 :', 데이터);
       }
   });

2. containPixel 사용하여 클릭 위치를 정확하게 결정하십시오.

   myChart.containPixel() 메소드의 첫 번째 매개 변수는 간단한 'grid' 가 아니지만 seriesIndex 속성을 포함하는 객체가 필요합니다.

    mychart.getzr (). on ( 'click', function (params) {
       let pointinpixel = [params.offsetx, params.offsety];
       secileindex = params.target.seriesindex를하자; // (mychart.containpixel ({seriesIndex : [seriesIndex]}, pointInpixel)) {{index index를 가져옵니다.
           // ... (여기서는 1 단계에서 코드를 사용하여 데이터를 얻습니다) ...
       }
   });

3. 멀티 링 파이 차트 처리 :

   멀티 링 파이 차트의 경우 seriesIndex 클릭 할 링을 나타냅니다. 위의 코드는이 상황을 올바르게 처리 할 수 ​​있으며 seriesIndex 직접 사용하십시오.

위의 방법을 통해 Echarts Pie 차트의 클릭 이벤트에서 필요한 데이터를 정확하게 추출 할 수 있습니다. containPixel 의 올바른 사용은 클릭 이벤트의 정확도를 향상시키기 위해 중요합니다. seriesIndex containPixel 및 데이터 액세스에 적절하게 가져 와서 사용되는지 확인하십시오.

위 내용은 Echarts 'getzr (). on ('Click ') 메소드를 통해 원형 차트의 특정 데이터를 얻는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!