How to use Php+jquery+mysql to implement asynchronous loading Echarts map data (with source download) _jquery

The Echarts map is mainly used for visualization of geographic area data and displaying data distribution information of different regions. Echarts Official website provides maps of China, the world map and other map data download, through JS introduction or asynchronous Load JSON file form call map.

Effect Demo Source Download

This article will be combined with an example to explain how to use Php+jquery+mysql to implement asynchronous loading Echarts map data, we take the map of China as an example, to show last year (2015) of our provinces GDP data. Through asynchronous request PHP, read the data in MySQL, and then displayed on the map, so in addition to your knowledge of front-end, you need to know about PHP and MySQL related knowledge.

Html

First, place the Div#mychart on the page where you need to load the map.

<div id= "MyChart" style= "width:600px;height:400px;" ></div> 

Then the load echarts and the Chinese map JS file. Because asynchronous Ajax loading data is applied in the example in this article, the jquery library file needs to be loaded.

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

Javascript

Next JS section, set the Echarts option first, see the following code and comments.

option = { 
title: { 
text: ' 2015 GDP statistics ', 
subtext: ' Data source Network (unit: trillion) ', left 
: ' Center '//title centered 
}, 
tooltip: {//Hint tool, 
trigger: ' Item ', 
formatter: ' {A} <br/>{b}: {c} trillion-yuan ' 
}, 
Visualmap: {// Visual mapping component that can adjust data changes according to range 
min:0,//min 
max:10,//Max left 
: ' Left ',//Position top 
: ' Bottom ', 
Orient: ' Horizontal ',//Level 
text:[' high ', ' low '],//text, default to value text 
calculable:true//Whether to enable range roaming, that is, whether there is a drag-and-drop handle, and with the handle to adjust the selection. 
}, 
Toolbox: {//toolbar 
show:true, 
Orient: ' Vertical ',///Vertical left 
: ' Right ', top 
: ' Center ', 
feature: { 
mark: {show:true}, 
saveasimage: {show:true}//Save as Picture 
} 
}, 
series: [ 
{ 
name: ' 2015 GDP ', 
type: ' Map ', 
maptype: ' China ',///using 
the map Roam:false,//whether to turn on mouse zooming and moving 
itemstyle:{ 
normal:{label:{show:true}, 
emphasis:{label:{show:true}}} 
, 
data:[]} 
] 
} ; 
var MyChart = echarts.init (document.getElementById (' MyChart ')); 
Mychart.showloading (); Pre-loading animations 

Then we use jquery's Ajax () to request data asynchronously.

$.ajax ({ 
type: Post), 
Async:false,//synchronous execution 
URL: "mapdata.php", 
dataType: "JSON",//return data in the form of JSON 
Success:function (Result) { 
mychart.hideloading ();//Hide Load animation 
mychart.setoption ({//Render data 
series: [ 
/according to the name corresponding to the corresponding series 
name: ' 2015 GDP ', 
data:result 
}] 
} 
, 
error:function () { 
Alert ("Request data failed!"); 
} 

Obviously, we saw that a POST request was sent to the mapdata.php via $.ajax () of jquery, requesting that data be returned in JSON format, rendering the map data when the request was successful and received a response.

Php

The mapdata.php task is to read the data in the MySQL datasheet and return it to the front end. The first is to connect the database, this part of the code in the connect.php, please download the source view. Then there is the SQL query, which reads the data from the table Echarts_map and returns in JSON format.

Include_once (' connect.php '); Connect database 
//query data 
$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); 

Mysql

Finally provides the MySQL data table structure information, the data information may download the source code, will SQL import your MySQL to be possible, notes the demonstration time modifies connect.php the database configuration information.

CREATE TABLE IF not EXISTS ' Echarts_map ' ( 
' id ' int (a) not NULL auto_increment, 
' province ' varchar (=) Not null,< c4/> ' GDP ' decimal (10,2) not NULL, 
PRIMARY KEY (' id ')