pring boot集成了tomcat等容器，效率更高，要实现数据的可视化，需要构建spring Boot框架架构web项目。同时使用注意的方式，就可以轻松建立前端访问路径与后端controller方法的映射关系，而不用像servlet一样维护繁琐的xml映射配置表。
Springboot入门学习: Spring入门篇_Spring入门视频教程-慕课网
Springboot官网： Spring Boot
Springboot学习： SpringBoot是什么？SpringBoot的优缺点有哪些？
下面咱看看如何使用工具IDEA利用Spring Boot构建web项目。
1. File > new > Project >进入如下页面：
点击完成后，会自动去下载对应的maven依赖。所以注意，这里需要你提前安装好maven。来看一下我的maven配置：
File > Settings > Build,Execution,Deployment > Build Tools > Maven
-Xms128m -Xmx512m -Duser.language=zh -Dfile.encoding=UTF-8
进入工程后，删除无用的文件mvnw、mvnw.cmd、.mvn文件夹
创建一个Controller：
package com.crn.spark.web; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloController { @RequestMapping(value = "/hello",method = RequestMethod.GET) public String sayHello(){ return "Spring Boot... Hello World!"; } }
启动：
选中WebApplication，鼠标点击右键：
启动日志：
前端访问测试：
http://localhost:8080/hello
访问路径中缺少，项目名称，再丰富一下配置文件：
观察启动日志，port已经发生变化：
再次进行访问测试：
http://localhost:8089/crn/hello
3. 使用Echarts构建静态数据可视化
1.先了解静态数据可视化，然后再学习动态数据可视化。
2.去echarts官网下载js文件，网址： https://www.echartsjs.com/zh/download.html点击在线定制
将下载的文件copy到static/js文件夹下，并记得改一下名称echarts.min.js
3. 构建web项目，如何能够加载页面效果，这里还需要在pom文件中添加一个maven依赖如下：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
记得重新导入maven依赖，并确认依赖是否导入。
4. 创建html文件
在templates文件夹下创建test.html文件：
5. 参照echarts官方文档
(1)引入echarts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
(2)绘制一个简单图表,可以去官网找个模板。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
(2)绘制一个简单图表
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> 6. 编写controller @RequestMapping(value = "/first",method =RequestMethod.GET) public ModelAndView firstDemo(){ return new ModelAndView("test"); }
7.访问测试：
http://localhost:8089/crn/first
稍微调整一下图表的位置：
搞定我们自己的静态页面：这是为了实现动态的展现做第一步的准备。
(1) 新创建一个html页面，将报表中对应的内容，改成我们自己的样式代码；
(2) 修改页面中的静态数据，使其能够成功展现；
4. 使用Echarts构建动态数据可视化
学习了Echarts的静态数据可视化之后，咱们再来学习动态数据的可视化。
搞定了静态页面，下面就可以开始实现动态数据的可视化了。
1. 后台准备数据
(0) 首先调整一下咱们的工程目录结构，勾选第二项Compact
使其更规范一些。
(1) 编写操作hbase的工具类；
添加依赖：
<repository> <id>cloudera</id> <url>https://repository.cloudera.com/artifactory/cloudera-repos/</url> </repository> <dependency> <groupId>org.apache.hbase</groupId> <artifactId>hbase-client</artifactId> <version>${hbase.version}</version> </dependency>
(2) 编写用于封装数据的实体类；
(3) 编写封装实体类数据的数据操作代码DAO；
(4)编写controller，调用dao将数据返回到前端页面；直接以List列表的方式返回；
a. 返回json数据的格式，所以还需要添加一个maven依赖：
b. 由于后端查询到的只是一个courseId，所以还需要进行一下转换。实际应用中id和name的对应关系肯定是配置在数据库中，咱这里为了简单就直接写成一个静态的代码块，写死在代码中。
(5)编写一个controller的方法，用于实现页面跳转；
(6)在页面中引入jQuery，异步调用ajax对后端数据进行请求：
通过上面的步骤，咱们可以实现统计每天实战课程的访问量，同理按照这个套路可以实现统计来自不同搜索引擎的课程访问量。
注意上面的流程中，已经包含了一个Spring boot集成使用echarts插件的完整流程了。在这里重新再梳理一下。
1. 使用idea构建一个maven管理的web项目；
2. 在pom文件中添加解析html的依赖；
3. 在templates文件夹中创建一个test.html;
4. 参考echarts官方说明流程：下载js，保存到resources目录下 > 在test.html中引入对应的js > 按照说明复制body中内容；
5. 编写controller代码，使用modeandview对应跳转访问html页面；测试是否能够成功访问；
6.测试通过后，进入echarts官网选择自己想要展示样式，将option代码复制；
7. 在后端controller中准备数据，在页面中动态访问实现数据的动态展示。
打包之后部署服务器：
使用阿里云DataV实现数据可视化
对于实现数据的可视化，不同的公司可能会有不同的方案。这里咱就为了适配不同的背景，再来学习一种很流行的可视化方案，那就是阿里云的DataV.
DataV功能说明：
1)点击量分省排名、运营商访问占比
通过IP解析到省份，城市，运营商 --> 这个在Spark SQL项目实战课程中有讲解
2) 浏览器访问占比、操作系统占比
通过解析userAgent -->这个在hadoop项目中有讲解
DataV实现数据可视化的流程：
资源准备：
(1) 一个公网能够访问的mysql数据库(DataV暂不支持hbase)
(2)DataV都是付费的，需要购买才能使用
流程：
1. 选择模板；调整文字时，都是带有样式操作界面的，可以很方便的进行调整；
2. 编写sql，查询数据库，实现动态展示。
对！流程就是这个简单！
