ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图。
相关mysql视频教程推荐:《mysql教程》
本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方面的相关知识。
HTML
首先在页面中需要加载地图的位置放上div#myChart。
<div id="myChart" style="width: 600px;height:400px;"> </div> <script src="echarts.min.js"></script>
然后是加载Echarts和中国地图js文件。由于本文实例中应用了异步ajax加载数据,所以需要加载jQuery库文件。
<script src="js/echarts.min.js"> </script><script src="js/china.js"></script> <script src="js/jquery.min.js"></script>
Javascript
接下来js部分,先设置好Echarts选项内容,请看以下代码及注释。
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); //渲染地图
然后我们使用jQuery的Ajax()来异步请求数据。
$.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("请求数据失败!"); } });
很显然,我们看到通过jQuery的$.ajax()向mapdata.php发送了一个post请求,要求返回json格式的数据,当请求成功并得到回应时,重新渲染地图数据。
PHP
mapdata.php的任务是读取mysql数据表中的数据,然后返回给前端。首先是要连接数据库,这部分代码在connect.php中,请下载源码查看。然后就是sql查询,读取表echarts_map中的数据,最后以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
最后提供mysql数据表结构信息,数据信息可以下载源码后,将sql导入你的mysql中即可,注意演示时修改connect.php的数据库配置信息。
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;

PHP type prompts to improve code quality and readability. 1) Scalar type tips: Since PHP7.0, basic data types are allowed to be specified in function parameters, such as int, float, etc. 2) Return type prompt: Ensure the consistency of the function return value type. 3) Union type prompt: Since PHP8.0, multiple types are allowed to be specified in function parameters or return values. 4) Nullable type prompt: Allows to include null values and handle functions that may return null values.

In PHP, use the clone keyword to create a copy of the object and customize the cloning behavior through the \_\_clone magic method. 1. Use the clone keyword to make a shallow copy, cloning the object's properties but not the object's properties. 2. The \_\_clone method can deeply copy nested objects to avoid shallow copying problems. 3. Pay attention to avoid circular references and performance problems in cloning, and optimize cloning operations to improve efficiency.

PHP is suitable for web development and content management systems, and Python is suitable for data science, machine learning and automation scripts. 1.PHP performs well in building fast and scalable websites and applications and is commonly used in CMS such as WordPress. 2. Python has performed outstandingly in the fields of data science and machine learning, with rich libraries such as NumPy and TensorFlow.

Key players in HTTP cache headers include Cache-Control, ETag, and Last-Modified. 1.Cache-Control is used to control caching policies. Example: Cache-Control:max-age=3600,public. 2. ETag verifies resource changes through unique identifiers, example: ETag: "686897696a7c876b7e". 3.Last-Modified indicates the resource's last modification time, example: Last-Modified:Wed,21Oct201507:28:00GMT.

In PHP, password_hash and password_verify functions should be used to implement secure password hashing, and MD5 or SHA1 should not be used. 1) password_hash generates a hash containing salt values to enhance security. 2) Password_verify verify password and ensure security by comparing hash values. 3) MD5 and SHA1 are vulnerable and lack salt values, and are not suitable for modern password security.

PHP is a server-side scripting language used for dynamic web development and server-side applications. 1.PHP is an interpreted language that does not require compilation and is suitable for rapid development. 2. PHP code is embedded in HTML, making it easy to develop web pages. 3. PHP processes server-side logic, generates HTML output, and supports user interaction and data processing. 4. PHP can interact with the database, process form submission, and execute server-side tasks.

PHP has shaped the network over the past few decades and will continue to play an important role in web development. 1) PHP originated in 1994 and has become the first choice for developers due to its ease of use and seamless integration with MySQL. 2) Its core functions include generating dynamic content and integrating with the database, allowing the website to be updated in real time and displayed in personalized manner. 3) The wide application and ecosystem of PHP have driven its long-term impact, but it also faces version updates and security challenges. 4) Performance improvements in recent years, such as the release of PHP7, enable it to compete with modern languages. 5) In the future, PHP needs to deal with new challenges such as containerization and microservices, but its flexibility and active community make it adaptable.

The core benefits of PHP include ease of learning, strong web development support, rich libraries and frameworks, high performance and scalability, cross-platform compatibility, and cost-effectiveness. 1) Easy to learn and use, suitable for beginners; 2) Good integration with web servers and supports multiple databases; 3) Have powerful frameworks such as Laravel; 4) High performance can be achieved through optimization; 5) Support multiple operating systems; 6) Open source to reduce development costs.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Dreamweaver Mac version
Visual web development tools

Dreamweaver CS6
Visual web development tools