6.1可视化

可视化

字体：

1.ECharts简介

ECharts，纯Javascript图表库，基于Canvas，底层依赖ZRender，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器

（IE8/9/10/11，Chrome，Firefox，Safari等）。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图，同时支持任意维度的堆积和多图表混合展现。

 

2.需求描述

需求1：把用户对京东进行评论时使用的是客户端还是移动端的统计数据，用饼图进行数据展示，从而达到让观者能从中熟悉某个项目与整个数据组间所存在的比例关系的目的。

需求2：把用户在收到货后，一般多久进行评论，即用户评论周期用柱状图展示，可以达到展现数据并将数据进行比较的目的。

需求3：将购买某商品的用户级别进行统计的结果数据用饼状图展示，从而可以展现用户级别的比例构成关系，让观者能从中熟悉某个级别的用户数量与所有购买用户所存在的比例关系。

需求4：将某件商品的每天的评论量的统计数据用折线图进行展现，可以展现出这个商品每天的评论量的变化趋势。

3.框架搭建

1.框架结构

 

2.框架说明

框架解释说明：

(1)src目录下的五个包和一个文件是项目的后台部分，用于实现页面中对数据的操作请求

(2)WebContent下命名为1的目录存放的是用于完成可视化数据展示的jsp页面，basic目录下存放编写页面公共部分的jsp文件，js目录下为实现jsp页面所用到的js文件，WEB-INF中的lib下为项目引入的所需要的jar包和为servlet定制url的web.xml文件，其余部分主要是实现jsp页面的样式文件。

后台工作原理说明：

(1)客户端向后台发送请求。即在jsp页面加载数据部分，设置需要调用的servlet文件名称和调用的方法参数给后台，目的是告诉后台要调用哪个servlet文件和这个文件中的哪个方法。

(2)web.xml文件里面设置了各个servlet文件的路径，所以客户端发送过来的请求会通过web.xml，提交到相应的如图（框架结构图）my.servlet目录下的servlet类，并接收传过来的参数,

(3)当成功提交到这个servlet类时，再通过参数值确定使用servlet哪个方法，然会通过如图（框架结构图）my.manager目录下相应的类里面的方法，将获取的数据的值返回。

(4)my.manager中的方法在获取数据时，需要图中（框架结构图）my.dao目录下相应的类里面的方法去操作数据库，因为dao层与db层结合可以直接操作数据库,获取数据库中的数据。

工作原理如图所示：

 

4.实验步骤

1.切换到/usr/data目录，创建edu6文件夹。

1. cd /usr/data  

2. mkdir /usr/data/edu6  

2.再切换到/usr/data/edu6目录下，将实验所需的文件echarts.tar.gz和edu6out.sql拷贝过来。

1.cd /usr/data/edu6  

拷贝命令自己完成

3.解压echarts.tar.gz包到当前目录

1. tar zxvf echarts.tar.gz  

4.查看MySQL服务是否已经启动

1. sudo service mysql status  

5.启动MySQL服务(数据库密码为：strongs，根据自己实际设置输入)(如果MySQL服务已经启动可略过此步)

1. sudo service mysql start  

6.启动MySQL(密码：strongs，根据自己实际设置输入)

1. mysql -u root -p  

7.创建并使用edu6out数据库

1. create database edu6out;  

2. use edu6out;  

8.将/usr/data/edu6目录下的edu6out.sql脚本导入到mysql的edu6out库中

1. source /usr/data/edu6/edu6out.sql;  

9.查看一下edu6out库下的所有表

1. show tables;  

 

10.打开Eclipse，导入echarts项目

单击File选择Import

 

11.选择General中的Existing Projects into Workspace

 

Select root directory处选择/usr/data/edu6目录下的echarts项目

 

这样就将echarts项目导入进来了，目录结构如下：

 

在每个包下都包含First、Second、Third、Forth四个类，分别对应四个需求的功能实现

 

5.需求一：将用户使用移动端还是PC端的统计结果，通过Echarts饼图展示出来。

12.首先，我们查看一下MySQL数据库中的ismobilesql表

1. select * from ismobilesql;  

 

包含两个字段ismobile（是否是移动端）和num（数量），其中1代表移动端，0代表PC端。

13.我们来执行echarts项目，查看一下效果

选择Window=>Show View=>Other

 

选择Server中的Servers后，点击OK

 

在Server处右键选择Add and Remove

 

 

将echarts项目添加到Configured中后，点击Finish

 

14.右键Server选择Start，开启Tomcat

 

15.Tomcat开启后，打开Firefox浏览器，输入下面网址

1. localhost:8080/echarts/1/ksh1.jsp  

 

可以看到移动端和PC端的比例结果已经通过饼状图展现出来了。

16.下面我们来看一下具体的代码：

在my.domain包下，First类的作用为：ismobile和num对象，定义其属性。具体代码如下：

1. package my.domain;  

2. public class First {  

3.     private String ismobile;  

4.     private int num;  

5.     public First() {  

6.     }  

7.     public String getIsmobile() {  

8.         return ismobile;  

9.     }  

10.     public void setIsmobile(String ismobile) {  

11.         this.ismobile = ismobile;  

12.     }  

13.     public int getNum() {  

14.         return num;  

15.     }  

16.     public void setNum(int num) {  

17.         this.num = num;  

18.     }  

19.     @Override  

20.     public String toString() {  

21.         return "First [ismobile=" + ismobile + ", num=" + num + "]";  

22.     }  

23.     public First(String ismobile, int num) {  

24.         super();  

25.         this.ismobile = ismobile;  

26.         this.num = num;  

27.     }  

28.     }  

在my.dao包下，FirstDao.java类的作用为：调用sql语句对数据库的数据进行具体操作。具体代码如下：

1. package my.dao;  

2. import java.sql.Connection;  

3. import java.sql.ResultSet;  

4. import java.sql.Statement;  

5. import java.util.ArrayList;  

6. import java.util.List;  

7. import my.domain.First;  

8. import org.apache.log4j.Logger;  

9. public class FirstDao {  

10. public static Logger logger = Logger.getLogger(FirstDao.class);  

11.   

12.     public static List<First> getFirstList() {  

13.   

14.     String sql = "select num,case when ismobile=1 then '移动端' when ismobile=0 then 'PC端' end as ismobile, count(1) as num from ismobilesql group by num";  

15.     Connection conn=  null;  

16.     ResultSet set = null;  

17.     Statement stmt = null;  

18.     List<First> list = new ArrayList<First>();  

19.         try {  

20.         conn = DBHelper.connDB();  

21.         stmt = conn.createStatement();  

22.         set = stmt.executeQuery(sql);  

23.         while (set.next()) {  

24.         First bean = new First();  

25.         bean.setIsmobile(set.getString("ismobile"));  

26.         bean.setNum(set.getInt("num"));  

27.         list.add(bean);  

28.         }  

29.         } catch (Exception e) {  

30.         logger.error(e.getMessage());  

31.         } finally{  

32.         DBHelper.free(set, stmt, conn);  

33.         }  

34.         return list;  

35.         }  

36.         }  

在my.manager包下，FirstManager.java类的作用为：用以调用FirstDao中的方法得到数据。具体代码如下：

1. package my.manager;  

2. import java.util.List;  

3. import my.dao.FirstDao;  

4. import my.domain.First;  

5. public class FirstManager {  

6.     public List<First> getFirstList() {  

7.     return FirstDao.getFirstList();  

8.     }  

9.     }  

在my.servlet包下，FirstServlet.java类的作用为：将前面得到的数据传给jsp页面，响应客户端。具体代码如下：

1. package my.servlet;  

2. import java.io.PrintWriter;  

3. import java.util.ArrayList;  

4. import java.util.List;  

5. import javax.servlet.http.HttpServletRequest;  

6. import javax.servlet.http.HttpServletResponse;  

7. import org.apache.log4j.Logger;  

8. import my.domain.First;  

9. import my.manager.FirstManager;  

10. import my.utils.BaseServlet;  

11. import net.sf.json.JSONArray;  

12. public class FirstServlet extends BaseServlet{  

13.     private static final long serialVersionUID = 1L;  

14. public static Logger logger = Logger.getLogger(FirstServlet.class);  

15.   

16.     @Override  

17.     public void execute(HttpServletRequest request, HttpServletResponse response) throws Exception {  

18.   

19.         response.setContentType("text/html;charset=utf-8");  

20.   

21.         String opt = request.getParameter("opt");  

22.         FirstManager scale= new FirstManager();  

23.   

24.         if (opt.equals("First")) {  

25.             List<First> list = new ArrayList<First>();  

26.     list = scale.getFirstList();  

27.     JSONArray jsonArray = JSONArray.fromObject(list);  

28.     //System.err.println(jsonArray);  

29.     PrintWriter out = response.getWriter();  

30.     out.print(jsonArray);  

31.     out.flush();  

32.     out.close();  

33.     }  

34.     }  

35.     }  

main.properties文件的作用为，配置MySQL相关参数，涉及用户名、密码、数据库等。（注意IP，数据库用户名，密码，地址要根据自己的实际情况给出）具体代码如下：

1. ##MySQL Configuration  

2. JDBC.DRIVER=com.mysql.jdbc.Driver  

3. JDBC.URL=jdbc:MySql://localhost:3306/edu5out?zeroDateTimeBehavior=convertToNull&characterEncoding=utf8  

4. MYSQLDB.USER=root  

5. MYSQLDB.PASSWORD=strongs  

6. #MySQL Configuration  

7. #JDBC.DRIVER=com.mysql.jdbc.Driver  

8. #JDBC.URL=jdbc:MySql://172.16.82.241:3306/b2b?zeroDateTimeBehavior=convertToNull&characterEncoding=utf8  

9. #MYSQLDB.USER=root  

10. #MYSQLDB.PASSWORD=strongs  

web.xml的作用为：接受客户端的请求，然后响应给相应的servlet类，就好比一个信息中转站。主要代码为：

1. -<servlet>  

2.     <servlet-name>FirstServlet</servlet-name>  

3.     <servlet-class>my.servlet.FirstServlet</servlet-class>  

4. </servlet>  

5. -<servlet-mapping>  

6.     <servlet-name>FirstServlet</servlet-name>  

7.     <url-pattern>/FirstServlet</url-pattern>  

8. </servlet-mapping>  

在WebContent/1/下面新建一个jsp页面，命名为ksh1，这个页面就是在浏览器上展现给客户的页面，在这个页面上接收后台数据，主要作用是实现数据的可视化展现。具体代码如下：

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  

2.   

3.   

4.   

5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

6.     <meta charset="utf-8">  

7.     <title>每天新增用户</title>  

8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  

9.     <%@include file="../basic/cssjs.jsp" %>  

10.     <!-- 引入Jquery包 -->  

11.     <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>  

12.     <!-- 引入Echarts3包 -->  

13.     <script type="text/javascript" src="../js/echarts.min.js"></script>  

14.   

15.   

16. <%@include file="../basic/top.jsp" %>  

17. <!-- content start -->  

18. <div class="container-fluid">  

19.     <div class="row-fluid">  

20.         <div class="span3">  

21.             <!-- left navbar start -->  

22.             <%@include file="../basic/left.jsp" %>  

23.             <!-- left navbar end -->  

24.         </div>  

25.         <!-- right content start -->  

26.         <div class="span9">  

27.             <div class="session well">饼状图可用来展现相对简单的比例构成关系，让观者能从中熟悉某个项目与整个数据组间所存在的比例关系。</div>  

28.             <div class="session">  

29.                 <div id="main" style="width: 100%;height:600px;"></div>  

30.             </div>  

31.         </div>  

32.         <!-- right content end -->  

33.     </div>  

34. </div>  

35. <!-- content end -->  

36.   

37.   

38. <script type="text/javascript">  

39.     // 基于准备好的dom，初始化echarts实例  

40.     var myChart = echarts.init(document.getElementById('main'));  

41.     // 指定图表的配置项和数据  

42.     myChart.setOption({  

43.         title : {  

44.             text: '移动端和PC端比例',  

45.             x:'center'  

46.         },  

47.         tooltip : {  

48.             trigger: 'item',  

49.             formatter: '{a} <br/>{b} : {c} ({d}%)'  

50.         },  

51.         legend: {  

52.             orient: 'vertical',  

53.             y:'100',  

54.             data: []  

55.         },  

56.         toolbox: {  

57.             show : true,  

58.             feature : {  

59.                 mark : {show: true},  

60.                 dataView : {show: true, readOnly: false},  

61.                 restore : {show: true},  

62.                 saveAsImage : {show: true}  

63.             }  

64.         },  

65.         series : [  

66.             {  

67.                 name: '移动端和PC端比例',  

68.                 type: 'pie',  

69.                 radius : '55%',  

70.                 center: ['50%', '60%'],  

71.                 //data:[{}],  

72.                 data:[],  

73.                 itemStyle: {  

74.                     emphasis: {  

75.                         shadowBlur: 10,  

76.                         shadowOffsetX: 0,  

77.                         shadowColor: 'rgba(0, 0, 0, 0.5)'  

78.                     }  

79.                 }  

80.             }  

81.         ]  

82.     });  

83.     //异步加载数据  

84.     var mapOnlyKey = [];  

85.     var mapKeyValue = [];  

86.     var mapOnlyValue = [];  

87.     var info = {"opt":"First"};  

88.     $.post("../FirstServlet", info, function(data){  

89.         mapOnlyKey.length=0;  

90.         mapKeyValue.length=0;  

91.         mapOnlyValue.length=0;  

92.         for(var i=0; i < data.length; i++){  

93.             mapOnlyKey.push( data[i].ismobile);  

94.             mapKeyValue.push({"value":Math.round(data[i].num), "name": data[i].ismobile });  

95.             mapOnlyValue.push( data[i].num );  

96.         }  

97.         // 填入数据  

98.         myChart.setOption({  

99.             legend: {  

100.                 //类别  

101.                 data: mapOnlyKey  

102.             },  

103.             series: [{  

104.                 // 根据名字对应到相应的系列  

105.                 name: '数量',  

106.                 data:mapKeyValue  

107.             }]  

108.         });  

109.         // 使用刚指定的配置项和数据显示图表。  

110.     }, 'json');  

111. </script>  

同理，需求二、需求三、需求四的原理和需求一相同，仍然使用以上框架，下面我们来实现剩下的三个需求。

6.需求二：将用户收到货后多久进行评价的统计结果，通过Echarts柱状图展示出来。

17.我们查看一下MySQL数据库中的dayssql表

1. select * from dayssql;  

 

包含day（天数）和num（数量）两个字段。

18.打开Firefox浏览器，输入下面网址

1. localhost:8080/echarts/1/ksh2.jsp  

 

可以看到会员评论周期的数据通过柱状图清晰的展现出来了。

7.需求三：将购买该商品的用户级别统计结果，通过Echarts饼状图展示出来。

19.我们查看一下MySQL数据库中的userlevelnamesql表

1. select * from userlevelnamesql;  

 

包含userlevelname（用户等级）和num（数量）两个字段。

20.打开Firefox浏览器，输入下面网址

1. localhost:8080/echarts/1/ksh3.jsp  

 

可以看到购买该商品的用户级别数据，通过饼状图清晰的展现出来了。

8.需求四：将该商品每天评论量的统计结果，通过Echarts折线图展示出来。

21.我们查看一下MySQL数据库中的creationtimesql表

1. select * from creationtimesql;  

 

包含creationtime（评论时间）和num（数量）两个字段。

22.打开Firefox浏览器，输入下面网址

1. localhost:8080/echarts/1/ksh4.jsp  

 

可以看到该商品每天评论量的统计结果，通过折线图清晰的展现出来了。

这样，实验就结束了，我们通过echarts完成了以上四个需求的数据展示