【大数据学习篇12】 Spark项目实战-数据可视化(三)

本文涉及的产品
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: 【大数据学习篇12】 Spark项目实战-数据可视化

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数据可视化的展示效果。


d31f3c4464e347f7a2b199a6e2c42e5b.png


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”查看页面单跳转化率数据可视化的展示效果。


7abd457b4753478cbcf0c5083d0ed286.png


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    运行项目实现广告点击流实时统计可视化


2390bd811ec340a69c8174f3f451cec3.png

       在项目sparkweb的主界面中单击【启动】按钮运行项目,项目启动成功后,在浏览器中输入“http://localhost:8080/ads”查看广告点击流实时统计可视化的展示效果。


c2736cc8a61648258403c99540b7d795.png


小结

       本文主要讲解了如何实现数据的可视化展示,首先,对实现可视化的技术以及系统架构进行详细讲解,使读者对实现数据可视化有了初步认知。接着,通过集成Phoenix与HBase实现将HBase中的数据映射到Phoenix,通过JDBC连接Phoenix获取分析结果。然后,讲解如何创建和配置Spring Boot项目。最后,在Spring Boot项目中编写相关类、接口以及HTML页面实现各区域热门商品Top3、热门品类Top10、页面单跳转化率以及广告点击流实时统计的可视化。通过本章的学习,读者应掌握Phoenix的使用,以及如何通过Spring Boot项目实现数据可视化展示。


相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
目录
相关文章
|
1天前
|
SQL 机器学习/深度学习 分布式计算
Spark快速上手:揭秘大数据处理的高效秘密,让你轻松应对海量数据
【10月更文挑战第25天】本文全面介绍了大数据处理框架 Spark,涵盖其基本概念、安装配置、编程模型及实际应用。Spark 是一个高效的分布式计算平台,支持批处理、实时流处理、SQL 查询和机器学习等任务。通过详细的技术综述和示例代码,帮助读者快速掌握 Spark 的核心技能。
13 6
|
1天前
|
分布式计算 大数据 OLAP
AnalyticDB与大数据生态集成:Spark & Flink
【10月更文挑战第25天】在大数据时代,实时数据处理和分析变得越来越重要。AnalyticDB(ADB)是阿里云推出的一款完全托管的实时数据仓库服务,支持PB级数据的实时分析。为了充分发挥AnalyticDB的潜力,将其与大数据处理工具如Apache Spark和Apache Flink集成是非常必要的。本文将从我个人的角度出发,分享如何将AnalyticDB与Spark和Flink集成,构建端到端的大数据处理流水线,实现数据的实时分析和处理。
11 1
|
11天前
|
分布式计算 大数据 Apache
利用.NET进行大数据处理:Apache Spark与.NET for Apache Spark
【10月更文挑战第15天】随着大数据成为企业决策和技术创新的关键驱动力,Apache Spark作为高效的大数据处理引擎,广受青睐。然而,.NET开发者面临使用Spark的门槛。本文介绍.NET for Apache Spark,展示如何通过C#和F#等.NET语言,结合Spark的强大功能进行大数据处理,简化开发流程并提升效率。示例代码演示了读取CSV文件及统计分析的基本操作,突显了.NET for Apache Spark的易用性和强大功能。
25 1
|
19天前
|
消息中间件 分布式计算 Kafka
大数据平台的毕业设计02:Spark与实时计算
大数据平台的毕业设计02:Spark与实时计算
|
21天前
|
存储 机器学习/深度学习 分布式计算
大数据技术——解锁数据的力量,引领未来趋势
【10月更文挑战第5天】大数据技术——解锁数据的力量,引领未来趋势
|
22天前
|
分布式计算 关系型数据库 MySQL
大数据-88 Spark 集群 案例学习 Spark Scala 案例 SuperWordCount 计算结果数据写入MySQL
大数据-88 Spark 集群 案例学习 Spark Scala 案例 SuperWordCount 计算结果数据写入MySQL
43 3
|
1天前
|
存储 安全 大数据
大数据隐私保护:用户数据的安全之道
【10月更文挑战第31天】在大数据时代,数据的价值日益凸显,但用户隐私保护问题也愈发严峻。本文探讨了大数据隐私保护的重要性、面临的挑战及有效解决方案,旨在为企业和社会提供用户数据安全的指导。通过加强透明度、采用加密技术、实施数据最小化原则、加强访问控制、采用隐私保护技术和提升用户意识,共同推动大数据隐私保护的发展。
|
5天前
|
SQL 存储 大数据
大数据中数据提取
【10月更文挑战第19天】
13 2
|
21天前
|
SQL 消息中间件 大数据
大数据-159 Apache Kylin 构建Cube 准备和测试数据(一)
大数据-159 Apache Kylin 构建Cube 准备和测试数据(一)
33 1
|
21天前
|
SQL 大数据 Apache
大数据-159 Apache Kylin 构建Cube 准备和测试数据(二)
大数据-159 Apache Kylin 构建Cube 准备和测试数据(二)
59 1