ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo。于是写下来,记录一下。
ECharts
ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之后)。
下面简单的介绍一下,如何在项目中使用ECharts。
下载js代码
下载地址: http://echarts.baidu.com/
个人觉得,开发人员下载完整版会比较好一点。而且官方建议的也是下载完整版。
博主这里下载的是完整版,大约不到2M。
工作原理浅析
其实仔细的想想,ECharts的工作就是在网页上显示了一张特殊的图片嘛。所以我们需要意识到,需要给“图片”一个一个空间,这样才会有图表的安家之所嘛。
然后空间有了,也就是有地皮了。要盖一个房子的话,必须得有框架不是。这样的往上面添加些砖瓦水泥什么的才能将房子盖起来。同样的,ECharts也是这么个原理。但是这个“骨架”叫Option。至于这个option需要怎么设置,官网上有详细的介绍,博主就不再这里重复的造轮子了。大家有兴趣的可以到下图展示的地方去学习。
在项目中引入ECharts
如题,本小节就是大致的讲一下如何简单的使用这个图标库。
不妨看一下下面的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门</title>
<script src="../static/js/echarts.js"></script>
<script src="../static/js/sleeplib.js"></script>
</head>
<body>
<h1>开始测试</h1>
<hr>
<!-- 先准备一个用于盛放图表的容器 -->
<div id='container' style="width: 600px; height: 400px;"></div>
<script>
//通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
//基于准备好的DOM,实例化echarts实例
var myChart = echarts.init(document.getElementById("container"));
// 指定图表的配置项和数据
var option1 = {
title : {
text : 'ECharts 入门案例'
},
tooltip : {
text : '鼠标放上去之后的悬浮提示语句!'
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '内裤' ]
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',
data : [ 7, 20, 36, 10, 10, 20, 28 ]
} ]
};
// 使用上面的配置项作为参数,传给echart来显示
myChart.setOption(option1);
</script>
</body>
</html>
关键在于最后一句:
myChart.setOption(option1);
起作用不言而喻了吧。那么,得到的效果是什么呢? 如下图:
另外手动的点击上面的那个legend为“销量”的小红色的矩形,会有惊喜的哟。
接下来开始进入今天的正题
后台处理
后台处理包括使用PHP查询数据库,然后以数组的形式返回,再由JQuery以Ajax的形式获取数据,交给前端进行显示的过程。
数据库端MySQL
数据是核心,所以建库很重要。这里仅仅是为了演示,所以数据库建的很简单,如下图:
PHP端
需要注意的是,数据库端返回的时候必须是JSON类型,这样才可以被ajax处理的更方便。
<?php
header("Content-type=text/json;charset=UTF-8");
$conn = mysql_connect("localhost", "root", "mysql") or die("连接数据库的过程失败!");
mysql_query("set names utf-8");
mysql_select_db("test");
$resultset = mysql_query("select name, age from echartsuser", $conn);
////////////////////////////////////////////////准备数据进行装填
$data = array();
////////////////////////////////////////////////实体类
class User{
public $username;
public $age;
}
////////////////////////////////////////////////处理
while($row = mysql_fetch_array($resultset, MYSQL_ASSOC)) {
$user = new User();
$user->username = $row['name'];
$user->age = $row['age'];
$data[] = $user;
}
$conn.close();
// 返回JSON类型的数据
echo json_encode($data);
那么验证返回的数据类型到底是不是JSON,我们只需要做下接口测试即可。博主使用的是Chrome浏览器,装了一个JSON的插件,所以可以很方便的检测。如下图:
JQuery & Ajax处理
JQuery真的是难的的一个函数工具库,因此使用JQuery处理起来ajax请求会降低代码编写的复杂度,其底层将自动的处理兼容性问题。这很GEEK。
本例,目的很明确,获取刚才的数据接口内的数据。所以代码很简单,如下:
// 初始化两个数组,盛装从数据库中获取到的数据
var names = [], ages = [];
//调用ajax来实现异步的加载数据
function getusers() {
$.ajax({
type: "post",
async: false,
url: "../app/getuser.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
names.push(result[i].username);
ages.push(result[i].age);
}
}
},
error: function(errmsg) {
alert("Ajax获取服务器数据出错了!"+ errmsg);
}
});
return names, ages;
}
// 执行异步请求
getusers();
ECharts 端处理
现在“万事俱备,只欠东风”了,数据都已经有了,剩下的就是如何显示它们了。按照一开始博主的盖房子理论,下面就把骨架搭起来吧。
// 初始化 图表对象
var mychart = echarts.init(document.getElementById("container"));
// 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充
var option = {
title : {
text : '姓名年龄分布图'
},
tooltip : {
show : true
},
legend : {
data : [ 'age' ]
},
xAxis : [ {
data : names
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "age",
"type" : "bar",
"data" : ages
} ]
};
// 将配置项赋给chart对象,来显示相关的数据
mychart.setOption(option);
注意xAxis: 里面的names,和series里面的ages就是之前JQuery使用ajax方式获取到的数据啦。
前端全部代码
个人觉得有个完整的代码会给人不少的启发,那么这里还是贴出前端交互的代码吧,也方便大家查看。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax Test</title>
<script src="../static/js/echarts.js"></script>
<script src="../static/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<h1>PHP Ajax ECahrts 测试</h1>
<hr>
<div id="container" style="width: 600px; height: 400px;"></div>
<script>
// 初始化两个数组,盛装从数据库中获取到的数据
var names = [], ages = [];
//调用ajax来实现异步的加载数据
function getusers() {
$.ajax({
type: "post",
async: false,
url: "../app/getuser.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
names.push(result[i].name);
ages.push(result[i].age);
}
}
},
error: function(errmsg) {
alert("Ajax获取服务器数据出错了!"+ errmsg);
}
});
return names, ages;
}
// 执行异步请求
getusers();
// 初始化 图表对象
var mychart = echarts.init(document.getElementById("container"));
// 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充
var option = {
title : {
text : '姓名年龄分布图'
},
tooltip : {
show : true
},
legend : {
data : [ 'age' ]
},
xAxis : [ {
data : names
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "age",
"type" : "bar",
"data" : ages
} ]
};
// 将配置项赋给chart对象,来显示相关的数据
mychart.setOption(option);
</script>
<marquee>确认可以到达这里啊</marquee>
</body>
</html>
演示结果
至此,编码任务就算完成了。那么迫不及待的来看看效果吧。
那么,稍微的修改一下数据,再来看看结果会怎样,刷新之后如下图:
总结
最后来回顾一下,本次试验的收获。其实也就是对于ECharts的一个比较“全栈”(请允许我用了这么个不太恰当的词 O(∩_∩)O ) 。比较简单的实现了后端以及前端的数据可视化显示的一个流程。
用到的技术也都是很大众化的了,当然后端不仅可以由PHP来完成,JAVA,Python,Golang等等都是可以的,只是使用PHP比较方便罢了。只要可以根据这个接口获取到想要的数据就行。
ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化的更多相关文章
- 从MVC到Ajax再到前后端分离的思考
前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- 谈谈《Dotnet core结合jquery的前后端加密解密密码密文传输的实现》一文中后端解密失败的原因
详情请看<Dotnet core结合jquery的前后端加密解密密码密文传输的实现>,正常来讲,这个博客里面的代码是没有问题的,但是我有时候却会直接报错,原因是后台解密失败:Interna ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- 【springMVC】简单的前后端数据交流
最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fast ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
随机推荐
- 简单的sql调优(批处理)
最近在写一个java的爬虫程序时,遇到了一个大量数据进行插入更新和大量数据循环查询的问题,所以查了一下一般的调优的方式,下面主要介绍我采取的调优措施. 一 .调优思路 先说说我采取方式的调优的思路,这 ...
- 数据库性能优化之SQL语句优化(上)
一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实际应用后,随着数据库中数据的增加,系统的 ...
- [JLOI2015]装备购买
题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量zi(aj ,.....,am) 表示 (1 <= i <= n; 1 <= j < ...
- 【Noip2017游记】
好像是考Noip的第5个年头了...高中的第一次Noip... 考了三年PJ,今年是第二次TG,希望不要像去年那么萎(gou) Day -1 考前停课了挺久的来着的,学长出了N套题来模拟,自己练了DP ...
- BZOJ4926 皮皮妖的递推
第二次乱出题.为了方便,以m=2为例,把原式变一下形,得f(i)+f(f(i-1))=i我们先无视掉那个-1,我们发现:诶,这个东西好像斐波那契数列.具体地,我们用f(n)表示把n用斐波那契数列进行拆 ...
- Tensorflow从入门到精通之——Tensorflow基本操作
前边的章节介绍了什么是Tensorflow,本节将带大家真正走进Tensorflow的世界,学习Tensorflow一些基本的操作及使用方法.同时也欢迎大家关注我们的网站和系列教程:http://ww ...
- jvm(一):总体概述
我们首先来了解一下jdk,jre,jvm的之间的关系 jvm用于运行字节码,如果我们仅仅用于运行java程序,仅部署jre即可,如果我们需要进行java开发则需要jdk环境 java结构内容: jav ...
- Mac Webview OC与JS交互实现
1.首先,需要定义一个JS可识别的变量(如external)用于OC与JS交互 - (void)webView:(WebView *)sender didClearWindowObject:(WebS ...
- struct2利用相关的Aware接口
Struts 2提供了Aware接口.Aware为"感知"的意思,实现了相关Aware接口的Action能够感知相应的资源.Struts在实例化一个Action实例时,如果发现它实 ...
- zookeeper工作机制
Zookeeper Zookeeper概念简介: Zookeeper是为用户的分布式应用程序提供协调服务的 zookeeper是为别的分布式程序服务的 Zookeeper本身就是一个分布式程序(只要有 ...