Cara menggunakan PHP+jQuery+MySQL untuk memuatkan data peta ECharts secara tidak segerak (dengan muat turun kod sumber)_jquery

Peta ECharts digunakan terutamanya untuk menggambarkan data kawasan geografi dan memaparkan maklumat pengedaran data di kawasan yang berbeza. Laman web rasmi ECharts menyediakan muat turun data peta seperti peta China dan peta dunia, dan peta boleh dipanggil melalui pengenalan js atau pemuatan tak segerak bagi fail json.

Demonstrasi kesan Muat turun kod sumber

Artikel ini akan menerangkan cara menggunakan PHP+jQuery+MySQL untuk memuatkan data peta ECharts secara tidak segerak dengan contoh Kami mengambil peta China sebagai contoh untuk menunjukkan data KDNK setiap wilayah di negara saya tahun lepas (2015). Dengan meminta PHP secara tidak segerak, data dalam MySQL dibaca dan kemudian dipaparkan pada peta Oleh itu, sebagai tambahan kepada pengetahuan front-end, artikel ini juga memerlukan anda memahami pengetahuan berkaitan PHP dan MySQL.

HTML

Tempat pertama div#myChart pada halaman tempat peta perlu dimuatkan.

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

Kemudian muatkan fail js peta Echarts dan China. Memandangkan data pemuatan ajax tak segerak digunakan dalam contoh artikel ini, fail perpustakaan jQuery perlu dimuatkan.

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

Javascript

Dalam bahagian js seterusnya, mula-mula tetapkan kandungan pilihan Echarts Sila lihat kod dan ulasan berikut.

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

Kemudian kami menggunakan Ajax() jQuery untuk meminta data secara tidak segerak.

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

Jelas sekali, kami melihat bahawa permintaan pos dihantar ke mapdata.php melalui jQuery's $.ajax(), yang memerlukan pengembalian data dalam format json Apabila permintaan itu berjaya dan respons diterima, data peta akan dibuat semula -diberikan.

PHP

Tugas mapdata.php ialah membaca data dalam jadual data mysql dan kemudian mengembalikannya ke hujung hadapan. Perkara pertama adalah untuk menyambung ke pangkalan data Bahagian kod ini ada dalam connect.php. Sila muat turun kod sumber untuk melihatnya. Kemudian terdapat pertanyaan sql, membaca data dalam jadual echarts_map, dan akhirnya mengembalikannya dalam 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

Akhir sekali, maklumat struktur jadual data mysql disediakan Untuk maklumat data, anda boleh memuat turun kod sumber dan mengimport sql ke dalam mysql anda Sila ambil perhatian untuk mengubah suai maklumat konfigurasi pangkalan data connect.php semasa demonstrasi.

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;