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 ')