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

本文通过一个实际的案例,详细介绍了如何使用ECharts前端图表库结合Ajax从后台获取数据并在前端进行可视化的全过程。首先,概述了ECharts的工作原理和在项目中的引入方法,接着展示了使用PHP查询数据库并以JSON格式返回数据的步骤,最后通过JQuery的Ajax获取数据并在ECharts中展示图表。整个过程涵盖了从数据库操作到前端图表展示的完整流程。
摘要由CSDN通过智能技术生成

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

ECharts

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

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

下载js代码

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

e0b662d6e8f8647662c8a6b5ef688383.png

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

工作原理浅析

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

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

6b67d116249915deb477dce9a509ec0c.png

在项目中引入ECharts

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

head>

charset="UTF-8">

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);

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

648c1b10791a477893ca7692a606eba3.png

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

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

后台处理

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

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

1710f82b0dc519316fc6dc3cdf048bcb.png

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

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的插件,所以可以很方便的检测。如下图:

5998a85f2e652fcf5aef3d56ee1f5317.png

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

演示结果

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

75776ca3d950b3c434fc5d290070eb89.png

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

e0c0fb68738d09b3f7ed77d19ce1f5fa.png

a00972da8b8e1bb2c099914abf18ebe4.png

总结

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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值