How to use PHP+jQuery+MySQL to load ECharts map data asynchronously (with source code download)_jquery

ECharts map is mainly used to visualize geographical area data and display data distribution information in different areas. The ECharts official website provides map data downloads such as China maps and world maps, and the maps can be called through js introduction or asynchronous loading of json files.

Effect demonstration Source code download

This article will explain how to use PHP+jQuery+MySQL to asynchronously load ECharts map data with examples. We take the map of China as an example to show the GDP data of each province in my country last year (2015). By asynchronously requesting PHP, the data in MySQL is read and then displayed on the map. Therefore, in addition to front-end knowledge, this article also requires you to understand PHP and MySQL related knowledge.

HTML

First place div#myChart on the page where the map needs to be loaded.

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

Then load Echarts and China map js files. Since asynchronous ajax loading data is used in the example of this article, the jQuery library file needs to be loaded.

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

Javascript

In the next js part, first set the Echarts option content. Please see the following code and comments.

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

Then we use jQuery’s Ajax() to request the data asynchronously.

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

Obviously, we see that a post request is sent to mapdata.php through jQuery's $.ajax(), requiring the return of data in json format. When the request is successful and a response is received, the map data is re-rendered.

PHP

The task of mapdata.php is to read the data in the mysql data table and then return it to the front end. The first thing is to connect to the database. This part of the code is in connect.php. Please download the source code to view it. Then there is the sql query, reading the data in the table echarts_map, and finally returning it in json format.

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

Finally, the mysql data table structure information is provided. For data information, you can download the source code and import the sql into your mysql. Please pay attention to modifying the database configuration information of connect.php during the demonstration.

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;