ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법-PHP 튜토리얼-php.cn

ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법

데이터 시각화 분야에서 ECharts는 널리 사용되는 프런트엔드 차트 라이브러리이며, ECharts의 강력한 데이터 시각화 기능은 다양한 업계에서 수요가 높습니다. 실제 프로젝트에서는 여러 차트를 연결하여 표시해야 하는 상황이 자주 발생합니다. 이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 전제 조건

이 기사를 실행하려면 다음 기술을 숙지해야 합니다.

HTML, CSS 및 JavaScript에 대한 기본 지식
ECharts에 대한 기본 지식; PHP.
2. 요구 사항 분석

우리의 요구 사항은 한 페이지에 여러 개의 상호 연관된 차트를 표시하고 이러한 차트를 서로 연결할 수 있는 것입니다.

요구 사항 분석은 다음과 같습니다.

페이지에는 메인 맵과 보조 맵이라는 두 개의 맵이 있습니다.

페이지에 막대 차트와 선 차트가 있습니다.
페이지 왼쪽에는 드롭다운 메뉴가 있습니다. 이 드롭다운 메뉴에는 여러 옵션이 포함되어 있습니다. 각 옵션은 해당 데이터를 다시 로드하고 해당 차트를 업데이트합니다.
드롭다운 메뉴에서 옵션을 선택하면 모든 차트가 데이터 변경에 따라 변경되고 막대 차트와 선 차트도 그에 따라 업데이트됩니다.
3. 구현 계획

페이지 레이아웃

먼저 페이지를 HTML 파일로 레이아웃합니다. Wrap이라는 div 컨테이너를 만들고 이 div 컨테이너에 모든 차트를 배치합니다. 그 중 페이지 공간을 최대한 활용하려면 지도 컨테이너의 높이를 100%로 설정해야 합니다.

<body>
    <div id="wrap">
        <div id="map1" style="height: 100%; width: 60%; float:left; "></div>
        <div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
        <div id="map2" style="height: 100%; width:60%; float:left;"></div>
        <div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
    </div>
</body>

로그인 후 복사

Calling ECharts

HTML 파일의