Comment utiliser PHP+jQuery+MySQL pour charger les données cartographiques ECharts de manière asynchrone (avec téléchargement du code source)_jquery

La carte ECharts est principalement utilisée pour visualiser les données de zones géographiques et afficher les informations de distribution des données dans différentes zones. Le site officiel d'ECharts propose des téléchargements de données cartographiques telles que des cartes de la Chine et des cartes du monde, et les cartes peuvent être appelées via l'introduction js ou le chargement asynchrone de fichiers json.

Démonstration d'effet Téléchargement du code source

Cet article expliquera comment utiliser PHP+jQuery+MySQL pour charger de manière asynchrone les données cartographiques ECharts avec des exemples. Nous prenons la carte de la Chine comme exemple pour montrer les données du PIB de chaque province de mon pays l'année dernière (2015). En demandant PHP de manière asynchrone, les données dans MySQL sont lues puis affichées sur la carte. Par conséquent, en plus des connaissances frontales, cet article vous demande également de comprendre les connaissances liées à PHP et MySQL.

HTML

Première place div#myChart sur la page où la carte doit être chargée.

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

Chargez ensuite les fichiers Echarts et China map js. Étant donné que les données de chargement ajax asynchrone sont utilisées dans l'exemple de cet article, le fichier de la bibliothèque jQuery doit être chargé.

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

Javascript

Dans la partie js suivante, définissez d'abord le contenu de l'option Echarts. Veuillez consulter le code et les commentaires suivants.

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); //渲染地图 

Ensuite, nous utilisons Ajax() de jQuery pour demander les données de manière asynchrone.

$.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("请求数据失败!"); 
} 
}); 

Évidemment, nous voyons qu'une requête de publication est envoyée à mapdata.php via $.ajax() de jQuery, nécessitant le retour des données au format json. Lorsque la requête réussit et qu'une réponse est reçue, les données cartographiques sont restituées. -rendu.

PHP

La tâche de mapdata.php est de lire les données dans la table de données mysql, puis de les renvoyer au front-end. La première chose est de se connecter à la base de données. Cette partie du code se trouve dans connect.php. Veuillez télécharger le code source pour le visualiser. Ensuite, il y a la requête SQL, qui lit les données dans la table echarts_map, et enfin les renvoie au format json.

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

Enfin, les informations sur la structure de la table de données MySQL sont fournies. Pour les informations sur les données, vous pouvez télécharger le code source et importer le SQL dans votre MySQL. Veuillez faire attention à la modification des informations de configuration de la base de données de connect.php pendant la démonstration.

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;