[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化

标签: Echarts 可视化 PHP Ajax 数据库
4813人阅读 评论(3) 收藏 举报
分类:
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识、中国地图和贵州地区各省份的数据分析,其中贵州地图才是它的核心内容。
这篇文章主要结合PHP、MySQL、JQuery和Ajax从数据库中获取数据,动态的显示值,这是实现真正可视化的技术入,可以应用于实际的项目中。基础性文章,希望对您有所帮助,如果文章中存在不足之处,还请海涵~


参考文章:ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
          echarts+php+mysql 绘图实例 - 谦一
          PHP+echarts读取地图数据

该篇文章代码下载地址:




一. 回顾Echarts绘制直方图

Echarts官网地址:http://echarts.baidu.com/index.html
注意:基础知识参考前一篇文章,这篇文章主要是代码为主,整个流程都是详细的。同时发现,准备写这篇文章的时候,“纯臻”大神也写了篇类似的,但依然有不同的地方可能对你有所帮助。
Echarts代码 test01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
运行结果如下图所示:



二. 创建数据库

创建数据库hcpmanage,再创建表guizhou,包括序号、地名、数量三个字段。
如下所示:


SQL语句对应的代码:

-- ----------------------------
-- Table structure for `guizhou`
-- ----------------------------
DROP TABLE IF EXISTS `guizhou`;
CREATE TABLE `guizhou` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `num` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- Records of guizhou
-- ----------------------------
INSERT INTO `guizhou` VALUES ('1', '贵阳市', '5');
INSERT INTO `guizhou` VALUES ('2', '遵义市', '20');
INSERT INTO `guizhou` VALUES ('3', '凯里市', '36');
INSERT INTO `guizhou` VALUES ('4', '六盘水市', '10');
INSERT INTO `guizhou` VALUES ('5', '都匀市', '10');
INSERT INTO `guizhou` VALUES ('6', '毕节市', '20');


三. PHP连接数据库及Json传值

PHP连接数据库的核心代码大家非常熟悉了,下面这段代码简单包括了Json取值。
sql.php文件:

<?php
	//PHP连接数据库 
	header("content-type:text/json;charset=utf-8");
	//链接数据库
	$con = mysql_connect("localhost", "root", "123456"); 
	if (!$con) 
	{ 
		die('Could not connect database: ' . mysql_error()); 
	} 

	//选择数据库
	$db_selected = mysql_select_db("hcpmanage", $con); 
	if (!$db_selected) 
	{ 
	 	die ("Can\'t use yxz : " . mysql_error()); 
	} 

	//执行MySQL查询-设置UTF8格式
	mysql_query("SET NAMES utf8"); 	

	//查询学生信息
	$sql = "SELECT * FROM `guizhou` ";
	$result = mysql_query($sql,$con); 

	//定义变量json存储值
	$data="";
	$array= array();
	class GuiZhou{
		public $id;
	    public $place;
	    public $num;
	}

	while ($row = mysql_fetch_row($result))
	{ 
		list($id,$place,$num) = $row;   
  	
  		/*
		echo $id.' ';
		echo $place.' ';
		echo $num;
		echo '<br >';
		*/
		$gz = new GuiZhou();
		$gz->id = $id;
		$gz->place = $place;
		$gz->num = $num;

		//数组赋值
		$array[] = $gz;
	}

	$data = json_encode($array);
	echo $data;
	//{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}

?>
核心代码,通过array数组获取Guizhou类中的值,该值是读取数据库并且赋值给实例gz的,再调用json_encode($array)进行格式转换。输出结果如下所示,也可以Json只获取两个值。


注意访问地址为:http://localhost:8080/20170224YXZ/sql.php,文件放到Apache的htdocs目录下。所有文件如下图所示:




四. Ajax动态实现Echarts可视化

test02.html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 初始化两个数组,盛装从数据库中获取到的数据
        var places=[], nums=[];
        function TestAjax(){
            $.ajax({
                type: "post",
                async: false,     //异步执行
                url: "sql.php",   //SQL数据库文件
                data: {},         //发送给数据库的数据
                dataType: "json", //json类型
                success: function(result) {
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            places.push(result[i].place);
                            nums.push(result[i].num);
                            console.log(result[i].place);
                            console.log(result[i].num);
                        }
                    }
                }
            })
            return places, nums;
        }

        //执行异步请求
        TestAjax();

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts+Ajax+MySQL+PHP'
            },
            tooltip: {
                show : true
            },
            legend: {
                data:['数量']
            },
            xAxis: [{
                //data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]
                type : 'category',
                data : places
            }],
            yAxis: {
                type : 'value'
            },
            series: [{
                name : "数量",
                type : "bar",
                data : nums
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <marquee>Eastmount 璋 love 娜!!!</marquee>
</body>
</html>
运行结果如下图所示,这是动态调用的可视化结果。


其中Ajax核心代码为:

     var places=[], nums=[];
        function TestAjax(){
            $.ajax({
                type: "post",
                async: false,     //异步执行
                url: "sql.php",   //SQL数据库文件
                data: {},         //发送给数据库的数据
                dataType: "json", //json类型
                success: function(result) {
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            places.push(result[i].place);
                            nums.push(result[i].num);
                            console.log(result[i].place);
                            console.log(result[i].num);
                        }
                    }
                }
            })
            return places, nums;
        }
        //执行异步请求
        TestAjax(); 
同时,浏览器中检查元素可以对Ajax的值进行测试输出,调用console.log函数。
如下图所示:


数据动态变化,数据库变了,可视化图也变化:





五. 难点及注意事项

初学的同学可能会遇到一下几个问题:

1.其中Echarts和JQuery需要导入的,即:
    <script src="echarts.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>

2.Echarts使用的方法请大家学习前一篇文章和官网文章,这里不再叙述。

3.PHP文件需要header("content-type:text/json;charset=utf-8");声明Json格式,同时Ajax也需要设置dataType: "json"。

4.声明的Ajax函数需要执行,对应代码中的TestAjax(),否则只是定义未执行。

5.如果Ajax报错 [object Object],如下图所示:



这需要Json格式一致,而我的错误是因为在PHP文件中增加了个注释导致无值,百度都无法解决,头都弄大了,所以写代码需要仔细。



6.最后动态数据是通过变量实现的,即ages替换以前的 [5, 20, 36, 10, 10, 20]。
            series : [ {
                   name : "num",
                   type : "bar",
                   data : ages
            }]



最后希望这篇文章对你有所帮助,尤其是对Echarts可视化感兴趣的同学,同样Java、C#、Python相关网站的原理一样,代码也会上传。最近心情真的好低落,哎!有时间写日记总结下吧。
        稳坐珠江夜游船,翻转长隆水世界。
        笑谈粤广风流人,宁负天下不负卿

哎!总是心事重重,自己真的有太多的不足和需要成长的地方,以前总会知足,现在也会。哎!为人处世真需要一辈子去学习,且写且珍惜吧,传递正能量。

(By:Eastmount 2017-06-02 中午2点  http://blog.csdn.net/eastmount/ )

查看评论

ajax链接数据库实例

function showCustomer(str) { var xmlhttp; if (str=="") { document.getElementById("txtH...
  • Ag_wenbi
  • Ag_wenbi
  • 2017-02-22 16:25:24
  • 1072

AJAX与SQL Server(一)

本实例演示利用Ajax技术,通过asp文件,从SQL Server数据库中读取数据。 1、新建一个网站。 2、在网站目录下新建一个txt文档,改名为datasource.asp,内容为: ...
  • lucky51222
  • lucky51222
  • 2016-04-20 19:55:46
  • 1621

AJAX例子(前端数据添加到数据库)

一个AJAX例子。 不同的是这次的数据要添加到数据库中,然后再前端显示出来()。 话不多说,上代码: view: ...
  • CallMeQiuqiuqiu
  • CallMeQiuqiuqiu
  • 2017-05-17 19:53:26
  • 4313

Java -- Ajax异步访问数据库内容

以上篇博文源码为样例fork,介绍Ajax异步访问数据信息,以下为新增内容 控制层control() – 新增内容 /* URL: .\control\QueryBookServlet.java; 方...
  • u014421677
  • u014421677
  • 2016-06-26 16:44:49
  • 2046

echarts链接MySQL

  • 2015年02月09日 17:40
  • 11KB
  • 下载

echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧。 就以官网最简单的那个小demo来做修改吧。官网上的...
  • chunfengdeyiding
  • chunfengdeyiding
  • 2015-01-20 21:28:54
  • 4890

要通过Echarts把数据可视化,前台与后台以及数据库怎么搭建?

您好,最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3。d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的。3月底由在亚马逊工作的同学介...
  • zhouhaiqing0905
  • zhouhaiqing0905
  • 2015-08-06 20:34:06
  • 3508

长连接与echarts实现动态数据实时展示

项目上提出了一个需求,说是需要做一个简单大气的页面,上方一排方块显示各个市区的当日业务数量,下方是一个柱状图表,动态的显示当日的业务数量。所谓动态就是要实时的显示业务数量,如果有业务的增加,数字会跳动...
  • u011291072
  • u011291072
  • 2017-07-15 17:46:54
  • 7104

echarts从数据库获取数据实现

  • 2017年11月13日 10:25
  • 3.2MB
  • 下载

php+echarts+ajax完成一个简单的折线图

最近在完成企业报表图形处理时用了百度echarts,梳理一点以php为后端完成web页面的Ajax刷新图形 此处以最近在用的thinkphp5.0框架为例,多余内容不赘述 首先php页面随便建立一个控...
  • boosir
  • boosir
  • 2017-06-28 23:51:37
  • 1075
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 252万+
    积分: 2万+
    排名: 398
    牛人博客
    博客专栏
    最新评论