5. 实现各区域热门商品Top3数据可视化
5.1 创建实体类Top3Entity
为了便于各区域热门商品Top3分析结果数据的传递，在项目的entity包中创建实体类Top3Entity，存储Phoenix中表top3的数据。
public class Top3Entity {
private String product_id;
private String viewcount;
private String area;
//实现属性的getter和setter方法
...
}
5.2 创建数据库访问接口Top3Dao
在项目的dao包中创建一个数据库访问接口Top3Dao，读取Phoenix中表top3的数据。
import cn.itcast.sparkweb.entity.Top3Entity;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface Top3Dao {
@Select("select \"product_id\",\"viewcount\",\"area\" from \"top3\"")
List<Top3Entity> getTop3();
}
5.3 创建控制器类Top3Controller
在项目的controller包中创建控制器类Top3Controller，用于实现接口Top3Dao中的方法getTop3()读取表top3的数据，通过Model对象向HTML传递数据。
@Controller
public class Top3Controller {
@Autowired
private Top3Dao top3Dao;
@RequestMapping(value = "/top3",produces = "text/html;charset=utf-8")
public String top3(Model model) {
List<Top3Entity> top3 = top3Dao.getTop3();
model.addAttribute("top3",top3);
return "top3";
}
}
5.4 创建HTML文件top3.html
在项目中的templates目录下创建HTML文件top3.html，在该文件中通过jQuery获取Model对象传递到HTML的各区域热门商品Top3的数据，并将获取到的数据填充到ECharts柱状图模板中，实现各区域热门商品Top3数据的可视化展示。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>top3</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
……
</body>
</html>
5.5 运行项目实现各区域热门商品Top3数据可视化
在IntelliJ IDEA中单击【启动】按钮运行项目，项目启动成功后，在浏览器中输入“http://localhost:8080/top3”查看各区域热门商品Top3数据可视化的展示效果。
6. 实现页面单跳转化率数据可视化
6.1 创建实体类ConversionEntity
为了便于页面单跳转化率数据的传递，在项目的entity包中创建实体类ConversionEntity，存储Phoenix中表conversion的数据。
public class ConversionEntity {
private String convert_page;
private String convert_rage;
//实现属性的getter和setter方法
...
}
6.2 创建数据库访问接口ConversionDao
在项目的dao包中创建一个数据库访问接口ConversionDao，读取Phoenix中表conversion的数据。
import cn.itcast.sparkweb.entity.ConversionEntity;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface ConversionDao {
@Select("select \"convert_page\",\"convert_rage\" from \"conversion\"") List<ConversionEntity> getConversion();
}
6.3 创建控制器类ConversionController
在项目的controller包中创建控制器类ConversionController，用于实现接口ConversionDao中的方法conversion()读取表conversion的数据，通过Model对象向HTML传递数据。
@Controller public class ConversionController {
@Autowired
private ConversionDao conversionDao;
@RequestMapping(value = "/conversion",produces = "text/html;charset=utf-8")
public String conversion(Model model){
List<ConversionEntity> conversion = conversionDao.getConversion();
model.addAttribute("conversion",conversion);
return "conversion";
}
}
6.4 创建HTML文件conversion.html
在项目中的templates目录下创建HTML文件conversion.html，在该文件中通过jQuery获取Model对象传递到HTML的页面单跳转化率数据，并将获取到的数据填充到ECharts柱状图模板中，实现页面单跳转化率数据的可视化展示。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>conversion</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
……
</body>
</html>
6.5 运行项目实现页面单跳转化率数据可视化
在IntelliJ IDEA中单击【启动】按钮运行项目，项目启动成功后，在浏览器中输入“http://localhost:8080/conversion”查看页面单跳转化率数据可视化的展示效果。
7. 实现广告点击流实时统计可视化
7.1 创建实体类AdsEntity
为了便于广告点击流实时统计结果数据的传递，在项目的entity包中创建实体类AdsEntity，存储Phoenix中表adstream的数据。
public class AdsEntity {
private String city;
private String ad_count;
private String ad_id;
//实现属性的getter和setter方法
...
}
7.2 创建数据库访问接口ConversionDao
在项目的dao包中创建一个数据库访问接口AdsDao，读取Phoenix中表adstream的数据。
import cn.itcast.sparkweb.entity.AdsEntity;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper public interface AdsDao {
@Select("select \"city\",\"ad_count\",\"ad_id\" from \"adstream\"")
List<AdsEntity>
ads();
}
7.3 创建控制器类AdsController
在项目的controller包中创建控制器类AdsController，用于实现接口AdsDao中的方法adsData ()读取表adstream的数据，将此数据作为方法的返回值传递到HTML。
@Controller public class AdsController {
@Autowired
private AdsDao adsDao;
@RequestMapping(value = "/adsdata",method = RequestMethod.POST) @ResponseBody
public List<AdsEntity> adsData(){
List<AdsEntity> ads = adsDao.ads();
return ads;
}
}
7.4 创建HTML文件ads.html
在项目中的templates目录下创建HTML文件ads.html，在该文件中通过jQuery的Ajax处理控制器类AdsController中adsData()方法返回的广告点击流实时统计数据，并将获取到的数据实时填充到ECharts柱状图模板中，实现广告点击流实时统计的可视化展示。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ads</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
……
</body>
</html>
7.5 运行项目实现广告点击流实时统计可视化
在项目sparkweb的主界面中单击【启动】按钮运行项目，项目启动成功后，在浏览器中输入“http://localhost:8080/ads”查看广告点击流实时统计可视化的展示效果。
小结
本文主要讲解了如何实现数据的可视化展示，首先，对实现可视化的技术以及系统架构进行详细讲解，使读者对实现数据可视化有了初步认知。接着，通过集成Phoenix与HBase实现将HBase中的数据映射到Phoenix，通过JDBC连接Phoenix获取分析结果。然后，讲解如何创建和配置Spring Boot项目。最后，在Spring Boot项目中编写相关类、接口以及HTML页面实现各区域热门商品Top3、热门品类Top10、页面单跳转化率以及广告点击流实时统计的可视化。通过本章的学习，读者应掌握Phoenix的使用，以及如何通过Spring Boot项目实现数据可视化展示。
