Example of using jQuery, PHP, and MySQL to asynchronously read data from ECharts

ECharts maps are used to visualize data in different regions. The ECharts official website provides map data downloads such as map of China and map of the world, and calls the map through js introduction or asynchronous loading of json files.
ECharts map application: use jQuery, PHP, and MySQL to asynchronously read data

This article will explain how to use PHP + jQuery + MySQL to asynchronously load ECharts map data using examples. We will take the map of China as an example to show the GDP data of each province in China last year (2015. You can asynchronously request php to read data from mysql and then display the data on the map. Therefore, in addition to understanding the front-end knowledge, you also need to know about PHP and MySQL.

HTML

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

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

Then, load the Echarts and map China js files. Because asynchronous ajax is used to load data in this example, 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

Next, set the Echarts option content in the js section. See the following code and comments.

Option = {
Title :{
Text: 'GDP statistics for June 11 ',
Subtext: 'Data source network (unit: Trillion RMB )',
Left: 'center' // center the title
},
Tooltip: {// prompt tool,
Trigger: 'item ',
Formatter: "{a} <br/> {B }:{ c} trillion RMB"
},
    
VisualMap: {// visual ing component, which can adjust data changes by range
Min: 0, // minimum value
Max: 10, // maximum value
Left: 'left', // position
Top: 'bottom ',
Orient: 'horizontal ', // horizontal
Text: ['high', 'low'], // text. The default value is numeric text.
Calculable: true // whether to enable value-range roaming, that is, whether there is a drag-and-drop handle, and use the handle to adjust the selected range.
},
Toolbox: {// toolbar
Show: true,
Orient: 'Vertical ', // vertical
Left: 'right ',
Top: 'center ',
Feature :{
Mark: {show: true },
SaveAsImage: {show: true} // Save as image
        }
},
Series :[
        {
Name: 'GDP in 2015 ',
Type: 'map ',
MapType: 'China', // use a map of china
Roam: false, // whether to enable Mouse zoom and horizontal shift
ItemStyle :{
Normal: {label: {show: true }},
Emphasis: {label: {show: true }}
},
Data: []
        }
    ]
};

Var myChart = echarts. init (document. getElementById ('mychart '));
 
MyChart. showLoading (); // pre-loaded animation
MyChart. setOption (option); // render a map
Then we use jQuery's Ajax () to asynchronously request data.
$. Ajax ({
Type: "post ",
Async: false, // synchronous execution
Url: "mapdata. php ",
DataType: "json", // the returned data format is json.
Success: function (result ){
MyChart. hideLoading (); // hide an animation
MyChart. setOption ({// render data
Series :[{
// Corresponding series according to the name
Name: 'GDP in 2015 ',
Data: result
}]
});
},
Error: function (){
Alert ("data request failed! ");
    }
});

Obviously, we can see $. ajax () to mapdata. php sends a post request to return data in json format. When the request succeeds and a response is returned, the map data is re-rendered.
PHP
The task of mapdata. php is to read data from the mysql data table and return it to the front-end. First, you need to connect to the database. This part of the code is in connect. php. Please download the source code to view it. The SQL query reads the data in the echarts_map table and returns the data in json format.
Include_once ('connect. Php'); // connect to the 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 );
Echo json_encode ($ arr); // output json format data
MySQL

Finally, the structure of the mysql data table is provided. You can download the source code and import the SQL statement into your mysql database. Note that you can modify the database configuration of connect. php during 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;