本教程介绍大数据课程实验案例“淘宝双11数据分析与预测”的第四个步骤，利用ECharts进行数据可视化分析。在实践本步骤之前，请先完成该实验案例的第一个步骤——本地数据集上传到数据仓库Hive，第二个步骤——Hive数据分析，第三个步骤：将数据从Hive导入到MySQL和第四个步骤：利用Spark预测回头客行为。这里假设你已经完成了前面的这四个步骤。
ECharts是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。下面将通过Web网页浏览器可视化分析淘宝双11数据。
由于ECharts是运行在网页前端，我们选用JSP作为服务端语言，读取MySQL中的数据，然后渲染到前端页面。
本步骤需要涉及以下工具：
操作系统:Linux系统（比如Ubuntu16.04）
可视化：ECharts（安装在Linux系统下）
数据库：MySQL（安装在Linux系统下）
Web应用服务器：tomcat
IDE:Eclipse
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。
查看Linux系统的Java版本,执行如下命令：
java -version
结果如下：
openjdk version "1.8.0_121" OpenJDK Runtime Environment (build 1.8.0_121-8u121-b13-0ubuntu1.16.04.2-b13) OpenJDK 64-Bit Server VM (build 25.121-b13, mixed mode)
可以看出Linux系统中的Java版本是1.8版本，那么下载的tomcat也要对应Java的版本。这里下载apache-tomcat-8.0.41.zip，点击tomcat下载地址，如下图：
，默认会下载到“~/下载/”目录
解压apache-tomcat-8.0.41.zip到用户目录～下,执行如下命令：
cd ~/下载/
unzip apache-tomcat-8.0.41.zip -d ~
执行如下命令，启动mysql
service mysql start
1.打开Eclipse，点击“File”菜单，或者通过工具栏的“New”创建Dynamic Web Project，弹出向导对话框
填入Project name后，并点击”New Runtime”,如下图所示：
2.出现New Server Runtime Environment向导对话框,选择“Apache Tomcat v8.0”,点击next按钮,如下图：
3.选择Tomcat安装文件夹，如下图：
4.返回New Server Runtime Environment向导对话框，点击finish即可。如下图：
5.返回Dynamic Web Project向导对话框，点击finish即可。如下图：
6.这样新建一个Dynamic Web Project就完成了。在Eclipse中展开新建的MyWebApp项目，初始整个项目框架如下：
src文件夹用来存放Java服务端的代码，例如:读取数据库MySQL中的数据
WebContent文件夹则用来存放前端页面文件，例如：前端页面资源css、img、js，前端JSP页面
7.下载mysql-connector-java-5.1.40.zip
mysql-connector-java-*.zip是Java连接MySQL的驱动包,默认会下载到”~/下载/”目录
执行如下命令：
cd ~/下载/
unzip unzip mysql-connector-java-5.1.40.zip -d ~
cd ~/mysql-connector-java-5.1.40/
mv ./mysql-connector-java-5.1.40-bin.jar ~/workspace/MyWebApp/WebContent/WEB-INF/lib/mysql-connector-java-5.1.40-bin.jar
上述操作完成后，即可开发可视化应用了。
整个项目开发完毕的项目结构，如下：
src目录用来存放服务端Java代码，WebContent用来存放前端页面的文件资源与代码。其中css目录用来存放外部样式表文件、font目录用来存放字体文件、img目录存放图片资源文件、js目录存放JavaScript文件，lib目录存放Java与mysql的连接库。
这里没有列出如何创建文件的图例，请读者自己去创建。
点击MyWebApp源码,查看每个文件的代码。
创建完所有的文件后，运行MyWebApp，查看我的应用。
首次运行MyWebApp,请按照如下操作，才能启动项目:
双击打开index.jsp文件，然后顶部Run菜单选择：Run As–>Run on Server
出现如下对话框，直接点击finish即可。
此时通过外部浏览器，例如火狐浏览器，打开MyWebApp地址,也能查看到该项目应用。
以后如果要再次运行MyWebApp,只需要直接启动Tomcat服务器即可，关闭服务器也可以通过如下图关闭。
整个项目，Java后端从数据库中查询的代码都集中在项目文件夹下/Java Resources/src/dbtaobao/connDb.java
代码如下：
package dbtaobao;
import java.sql.*;
import java.util.ArrayList;
public class connDb {
private static Connection con = null;
private static Statement stmt = null;
private static ResultSet rs = null;
//连接数据库方法
public static void startConn(){
try{
Class.forName("com.mysql.jdbc.Driver");
//连接数据库中间件
try{
con = DriverManager.getConnection("jdbc:MySQL://localhost:3306/dbtaobao","root","root");
}catch(SQLException e){
e.printStackTrace();
}
}catch(ClassNotFoundException e){
e.printStackTrace();
}
}
//关闭连接数据库方法
public static void endConn() throws SQLException{
if(con != null){
con.close();
con = null;
}
if(rs != null){
rs.close();
rs = null;
}
if(stmt != null){
stmt.close();
stmt = null;
}
}
//数据库双11 所有买家消费行为比例
public static ArrayList index() throws SQLException{
ArrayList
startConn();
stmt = con.createStatement();
rs = stmt.executeQuery("select action,count(*) num from user_log group by action desc");
while(rs.next()){
String[] temp={rs.getString("action"),rs.getString("num")};
list.add(temp);
}
endConn();
return list;
}
//男女买家交易对比
public static ArrayList index_1() throws SQLException{
ArrayList
startConn();
stmt = con.createStatement();
rs = stmt.executeQuery("select gender,count(*) num from user_log group by gender desc");
while(rs.next()){
String[] temp={rs.getString("gender"),rs.getString("num")};
list.add(temp);
}
endConn();
return list;
}
//男女买家各个年龄段交易对比
public static ArrayList index_2() throws SQLException{
ArrayList
startConn();
stmt = con.createStatement();
rs = stmt.executeQuery("select gender,age_range,count(*) num from user_log group by gender,age_range desc");
while(rs.next()){
String[] temp={rs.getString("gender"),rs.getString("age_range"),rs.getString("num")};
list.add(temp);
}
endConn();
return list;
}
//获取销量前五的商品类别
public static ArrayList index_3() throws SQLException{
ArrayList
startConn();
stmt = con.createStatement();
rs = stmt.executeQuery("select cat_id,count(*) num from user_log group by cat_id order by count(*) desc limit 5");
while(rs.next()){
String[] temp={rs.getString("cat_id"),rs.getString("num")};
list.add(temp);
}
endConn();
return list;
}
//各个省份的总成交量对比
public static ArrayList index_4() throws SQLException{
ArrayList
startConn();
stmt = con.createStatement();
rs = stmt.executeQuery("select province,count(*) num from user_log group by province order by count(*) desc");
while(rs.next()){
String[] temp={rs.getString("province"),rs.getString("num")};
list.add(temp);
}
endConn();
return list;
}
}
前端页面想要获取服务端的数据，还需要导入相关的包，例如：/WebContent/index.jsp部分代码如下：
<%@ page language="java" import="dbtaobao.connDb,java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
ArrayList
%>
前端JSP页面使用ECharts来展现可视化。每个JSP页面都需要导入相关ECharts.js文件，如需要中国地图的可视化，还需要另外导入china.js文件。
那么如何使用ECharts的可视化逻辑代码，我们在每个jsp的底部编写可视化逻辑代码。这里展示index.jsp中可视化逻辑代码:
ECharts包含各种各样的可视化图形，每种图形的逻辑代码，请参考ECharts官方示例代码,请读者自己参考index.jsp中的代码，再根据ECharts官方示例代码，自行完成其他可视化比较。
注意：由于ECharts更新，提供下载的中国矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
最终，我自己使用饼图，散点图，柱状图，地图等完成了如下效果，读者如果觉得有更适合的可视化图形，也可以自己另行修改。
最后展示所有页面的效果图：
到这里，第五个步骤的实验内容结束，整个淘宝双11数据分析与预测课程案例到这里顺利完结！
