ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

编程之家收集整理的这篇文章主要介绍了ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载声明:http://blog.csdn.net/marksinoberg/article/details/52875610


@H_301_13@

目录(?)[+]

最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo。于是写下来,记录一下。


ECharts

ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之后)。

下面简单的介绍一下,如何在项目中使用ECharts。

下载js代码

下载地址:  http://echarts.baidu.com/

个人觉得,开发人员下载完整版会比较好一点。而且官方建议的也是下载完整版。

下载Echarts

博主这里下载的是完整版,大约不到2M。

工作原理浅析

其实仔细的想想,ECharts的工作就是在网页上显示了一张特殊的图片嘛。所以我们需要意识到,需要给“图片”一个一个空间,这样才会有图表的安家之所嘛。

然后空间有了,也就是有地皮了。要盖一个房子的话,必须得有框架不是。这样的往上面添加些砖瓦水泥什么的才能将房子盖起来。同样的,ECharts也是这么个原理。但是这个“骨架”叫Option。至于这个option需要怎么设置,官网上有详细的介绍,博主就不再这里重复的造轮子了。大家有兴趣的可以到下图展示的地方去学习。

ECharts3下载

在项目中引入ECharts

如题,本小节就是大致的讲一下如何简单的使用这个图标库。 
不妨看一下下面的代码

<!DOCTYPE html>
<html>
head>
Meta charset="UTF-8">
title>入门</title>
script src="../static/js/echarts.js">script>
"../static/js/sleeplib.js">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 : [ '衬衫','羊毛衫',0);">'雪纺衫',0);">'裤子',0);">'高跟鞋',0);">'袜子',0);">'内裤' ]
            },yAxis : {},series : [ {
                name : '销量',type : 'bar',data : [ 7,20,102);">36,102);">10,102);">28 ]
            } ]
        };

        // 使用上面的配置项作为参数,传给echart来显示
        myChart.setOption(option1);
    body>
html>
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

关键在于最后一句:

myChart.setOption(option1);

起作用不言而喻了吧。那么,得到的效果是什么呢? 如下图: 

Tutorial测试

另外手动的点击上面的那个legend为“销量”的小红色的矩形,会有惊喜的哟。


接下来开始进入今天的正题


后台处理

后台处理包括使用PHP查询数据库,然后以数组的形式返回,再由jQuery以Ajax的形式获取数据,交给前端进行显示的过程。

数据库MysqL

数据是核心,所以建库很重要。这里仅仅是为了演示,所以数据库建的很简单,如下图: 

建立数据库

PHP

需要注意的是,数据库端返回的时候必须是JSON类型,这样才可以被ajax处理的更方便。

<?PHP
header("Content-type=text/json;charset=UTF-8");

$conn = MysqL_connect("localhost",0);">"root",0);">"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);

   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

那么验证返回的数据类型到底是不是JSON,我们只需要做下接口测试即可。博主使用的是Chrome浏览器,装了一个JSON的插件,所以可以很方便的检测。如下图: 

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: (errmsg) {
                alert("Ajax获取服务器数据出错了!"+ errmsg);
            }
        });
    return names,ages;
    }

    // 执行异步请求
    getusers();
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

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'
            } Box-sizing: border-Box; color: rgb(68,series : [ {
                "name" : "age",0);">"type" : "bar",0);">"data" : ages
            } ]
        };

        // 将配置项赋给chart对象,来显示相关的数据
        mychart.setOption(option);
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

注意xAxis: 里面的names,和series里面的ages就是之前JQuery使用ajax方式获取到的数据啦。

前端全部代码

个人觉得有个完整的代码会给人不少的启发,那么这里还是贴出前端交互的代码吧,也方便大家查看。

title>JQuery Ajax Test"../static/js/jquery-1.11.1.min.js">body>
    h1>PHP Ajax ECahrts 测试hr>
    "container" script>

    0 ; i < result.length; i++){
                        names.push(result[i].name);
                        ages.push(result[i].age);
                    }
                }
            },0);">// 执行异步请求
    getusers();


    // 初始化 图表对象
        var mychart = echarts.init(document.getElementById(// 进行相关项的设置,也就是所谓的搭搭骨架,方便待会的ajax异步的数据填充
        var option = {
            title : {
                text : 'age' ]
            },xAxis : [ {
                data : names
            } ],yAxis : [ {
                type : 'value'
            } ],series : [ {
                "data" : ages
            } ]
        };

        // 将配置项赋给chart对象,来显示相关的数据
        mychart.setOption(option);




    marquee>确认可以到达这里啊marquee>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    演示结果

    至此,编码任务就算完成了。那么迫不及待的来看看效果吧。 

    效果演示图

    那么,稍微的修改一下数据,再来看看结果会怎样,刷新之后如下图: 

    修改完数据

    更新之后的数据

    @L_404_31@总结

    最后来回顾一下,本次试验的收获。其实也就是对于ECharts的一个比较“全栈”(请允许我用了这么个不太恰当的词 O(∩_∩)O ) 。比较简单的实现了后端以及前端的数据可视化显示的一个流程。

    用到的技术也都是很大众化的了,当然后端不仅可以由PHP来完成,JavaPython,Golang等等都是可以的,只是使用PHP比较方便罢了。只要可以根据这个接口获取到想要的数据就行。

    6

    总结

    以上是编程之家为你收集整理的ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化全部内容,希望文章能够帮你解决ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化所遇到的程序开发问题。

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
    编程之家官方1群:1065694478(已满)
    编程之家官方2群:163560250(已满)
    编程之家官方3群:312128206

    相关文章

    猜你在找的HTML相关文章

    如果想用程序模拟在浏览器中使用百度搜索的结果,最先想到的就是爬虫了,然而,还有一个更简单的方式可以使用,那就行直接使用百度的 API ,返回是 json 格式的数据,简直不要太爽。。。API:https://www.baidu.com/s?wd=apple&amp;pn=1&amp;rn=10&amp;tn=json参数说明:wd:关键词pn : 查询偏移位置(偏移位置对应...
    本文目标30分钟内让你明白HTML是什么,并对它有一些基本的了解。一旦入门后,你可以从网上找到更多更详细的资料来继续学习。什么是HTMLHTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比"文本"更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用
    最普通最常用最一般的方法就是用submit type..看代码:    另外,还有一种常用的方法是使用图片:     第三种是使用链接来提交表单,用到了JavaScript的DOM模型:    提交这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非
    MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。 MathJax项目于2009年开始,发起人有American Mathematical Society, Design Science等,还有众多的支持者,个人感觉MathJax
    Ryan Zhao学习、实践、分享GitHub RSSMathjax与LaTex公式简介Mar 3, 2015   #MathJax  #公式  #LaTex  #tutorial 本文从math.stackexchange.com上名为MathJax basic tutorial and quick referenc
    转载声明:http://blog.csdn.net/testcs_dn/article/details/44274339目录目录UML序列图简介时序图元素1角色Actor2对象Object3生命线Lifeline4激活期Activation5消息Message时序图结构连接建立的过程呈现效果示例二呈现效果对象顺序
    HTML 基本文档文档标题可见文本...基本标签(Basic Tags)最大的标题 . . . . . . . . . . . . 最小的标题这是一个段落。 (换行) (水平线)文本格式化(Formatting)粗体文本计算机代码强调文本斜体文本键盘输入 预格式
    按十六进制的值排序单击一个颜色名或者 16 进制值,就可以查看与不同文字颜色搭配的背景颜色。Color NameHEXColorAliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquama
    微信公众号搜索 “ 程序精选 ” ,选择关注!
    微信公众号搜 "程序精选"关注