PHP jQuery MySQL을 사용하여 ECharts 지도 데이터를 비동기식으로 로드하는 방법(소스 코드 다운로드 포함)_jquery

ECharts 지도는 주로 지리적 영역 데이터를 시각화하고 다양한 영역의 데이터 분포 정보를 표시하는 데 사용됩니다. ECharts 공식 홈페이지에서는 중국 지도, 세계 지도 등 지도 데이터 다운로드 기능을 제공하고 있으며, 해당 지도는 js 소개나 json 파일의 비동기 로딩을 통해 호출할 수 있습니다.

효과 시연 소스코드 다운로드

이 기사에서는 예제를 사용하여 PHP jQuery MySQL을 사용하여 ECharts 지도 데이터를 비동기적으로 로드하는 방법을 설명합니다. 작년(2015년) 우리나라 각 성의 GDP 데이터를 표시하기 위해 중국 지도를 예로 들겠습니다. PHP를 비동기적으로 요청하면 MySQL의 데이터를 읽어서 지도에 표시합니다. 따라서 이 기사에서는 프런트엔드 지식 외에도 PHP 및 MySQL 관련 지식도 이해해야 합니다.

HTML

지도를 로드해야 하는 페이지에 div#myChart를 먼저 배치하세요.

<div id="myChart" style="width: 600px;height:400px;"></div> 
<script src="echarts.min.js"></script> 

그런 다음 Echarts 및 중국 지도 js 파일을 로드합니다. 이 기사의 예제에서는 데이터의 비동기 ajax 로딩이 사용되었으므로 jQuery 라이브러리 파일을 로드해야 합니다.

<script src="js/echarts.min.js"></script> 
<script src="js/china.js"></script> 
<script src="js/jquery.min.js"></script> 

자바스크립트

다음 js 부분에서는 먼저 Echarts 옵션 내용을 설정해 주세요. 다음 코드와 설명을 참고하세요.

option = { 
title : { 
text: '2015年GDP统计数据', 
subtext: '数据来源网络（单位：万亿元）', 
left: 'center' //标题居中 
}, 
tooltip : { //提示工具， 
trigger: 'item', 
formatter: "{a} <br/>{b} : {c}万亿元" 
}, 
visualMap: { //视觉映射组件，可以根据范围调节数据变化 
min: 0, //最小值 
max: 10, //最大值 
left: 'left', //位置 
top: 'bottom', 
orient: 'horizontal', //水平 
text:['高','低'], // 文本，默认为数值文本 
calculable : true //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。 
}, 
toolbox: { //工具栏 
show: true, 
orient : 'vertical', //垂直 
left: 'right', 
top: 'center', 
feature : { 
mark : {show: true}, 
saveAsImage : {show: true} //保存为图片 
} 
}, 
series : [ 
{ 
name: '2015年GDP', 
type: 'map', 
mapType: 'china', //使用中国地图 
roam: false, //是否开启鼠标缩放和平移 
itemStyle:{ 
normal:{label:{show:true}}, 
emphasis:{label:{show:true}} 
}, 
data:[] 
} 
] 
}; 
var myChart = echarts.init(document.getElementById('myChart')); 
myChart.showLoading(); //预加载动画 
myChart.setOption(option); //渲染地图 

그런 다음 jQuery의 Ajax()를 사용하여 비동기적으로 데이터를 요청합니다.

$.ajax({ 
type: "post", 
async: false, //同步执行 
url: "mapdata.php", 
dataType: "json", //返回数据形式为json 
success: function(result) { 
myChart.hideLoading(); //隐藏加载动画 
myChart.setOption({ //渲染数据 
series: [{ 
// 根据名字对应到相应的系列 
name: '2015年GDP', 
data: result 
}] 
}); 
}, 
error: function() { 
alert("请求数据失败!"); 
} 
}); 

분명히, 게시물 요청이 jQuery의 $.ajax()를 통해 mapdata.php로 전송되고, 요청이 성공하고 응답이 수신되면 지도 데이터가 다시 반환되는 것을 볼 수 있습니다. -렌더링.

PHP

mapdata.php의 작업은 mysql 데이터 테이블의 데이터를 읽어서 프런트 엔드에 반환하는 것입니다. 첫 번째는 데이터베이스에 연결하는 것입니다. 코드의 이 부분은 connect.php에 있습니다. 소스 코드를 다운로드하여 확인하세요. 그런 다음 echarts_map 테이블의 데이터를 읽고 마지막으로 json 형식으로 반환하는 SQL 쿼리가 있습니다.

include_once('connect.php'); //连接数据库 
//查询数据 
$sql = "select * from echarts_map"; 
$query = mysql_query($sql); 
while($row=mysql_fetch_array($query)){ 
$arr[] = array( 
'name' => $row['province'], 
'value' => $row['gdp'] 
); 
} 
mysql_close($link); 
echo json_encode($arr); //输出json格式数据 

MySQL

마지막으로 mysql 데이터 테이블 구조 정보가 제공됩니다. 데이터 정보는 소스 코드를 다운로드하여 mysql로 ​​가져올 수 있습니다. 시연 중에 connect.php의 데이터베이스 구성 정보를 수정하는 데 주의하시기 바랍니다.

CREATE TABLE IF NOT EXISTS `echarts_map` ( 
`id` int(10) NOT NULL AUTO_INCREMENT, 
`province` varchar(30) NOT NULL, 
`gdp` decimal(10,2) NOT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;