데이터 시각화 분야에서 ECharts는 널리 사용되는 프런트엔드 차트 라이브러리이며, ECharts의 강력한 데이터 시각화 기능은 다양한 업계에서 수요가 높습니다. 실제 프로젝트에서는 여러 차트를 연결하여 표시해야 하는 상황이 자주 발생합니다. 이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 전제 조건
이 기사를 실행하려면 다음 기술을 숙지해야 합니다.
우리의 요구 사항은 한 페이지에 여러 개의 상호 연관된 차트를 표시하고 이러한 차트를 서로 연결할 수 있는 것입니다.
요구 사항 분석은 다음과 같습니다.
페이지에는 메인 맵과 보조 맵이라는 두 개의 맵이 있습니다.<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 파일의 <script> 태그를 사용하여 ECharts 라이브러리 파일을 소개하고 해당 차트 인스턴스를 만듭니다. 코드 Chart1, Chart2, map1 및 map2에서 차트 인스턴스의 이름을 지정합니다. </script>
<!-- 引入ECharts的库文件 --> <script src="echarts.common.min.js"></script> <script> // 创建主地图的图表实例 var map1 = echarts.init(document.getElementById('map1')); // 创建次地图的图表实例 var map2 = echarts.init(document.getElementById('map2')); // 创建条形图的图表实例 var chart1 = echarts.init(document.getElementById('chart1')); // 创建折线图的图表实例 var chart2 = echarts.init(document.getElementById('chart2')); </script>데이터 가져오기
{ "map1_data":[...], "map2_data":[...], "chart1_data":[...], "chart2_data":[...], ... }
여기에서는 jQuery의 .ajax() 메서드를 사용하여 서버에 데이터를 요청하고, 요청이 성공한 후 해당 함수를 호출하여 차트를 그립니다.
function getData(option) { $.ajax({ type: "POST", url: "getdata.php", data: option, dataType: "json", success: function(response) { drawMap1(response.map1_data); drawMap2(response.map2_data); drawChart1(response.chart1_data); drawChart2(response.chart2_data); ... } }); }차트 그리기
function drawMap1(data) { // 使用接收到的数据进行地图实例的数据更新 map1.setOption(option); } function drawMap2(data) { // 使用接收到的数据进行地图实例的数据更新 map2.setOption(option); } function drawChart1(data) { // 使用接收到的数据进行条形图实例的数据更新 chart1.setOption(option); } function drawChart2(data) { // 使用接收到的数据进行折线图实例的数据更新 chart2.setOption(option); }차트 연결
ECharts API의 dispatchAction() 메서드를 사용하여 차트 간의 연결을 설정할 수 있습니다. 차트를 선택하면 해당 차트의 선택된 데이터를 다른 차트에 전달해야 합니다.
option1.on('mapSelect', function(params) { // 获取地图选中的区域 var selectedData = params.batch[0].selected[0]; // 为条形图和折线图设置选中数据 chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: selectedData.dataIndex }); chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: selectedData.dataIndex }); // 为次地图设置选中数据 map2.dispatchAction({ type: 'mapSelect', name: selectedData.name, seriesIndex: 0 }); // 为请求数据添加参数 var option = { map1_data: selectedData.name, ... } // 请求更新数据 getData(option); });
4. 요약
이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개했습니다. 먼저 요구 사항을 이해한 후 페이지 레이아웃, ECharts 라이브러리 호출, 데이터 가져오기 및 차트 그리기, 차트 연결 구현의 5가지 측면에서 상세한 구현 계획과 구체적인 코드 예제를 제공했습니다. 이 기사를 연구함으로써 독자들은 ECharts 라이브러리를 더 잘 적용하여 다중 차트 연결로 표시된 데이터를 시각화할 수 있다고 믿습니다.
위 내용은 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!