13-1 -課程目錄
課程目錄
爲什麼需要可視化
SpringBoot構建web項目
使用Echarts構建靜態數據可視化
使用Echarts構建動態數據可視化
阿里雲DataV數據可視化
13-2 -爲什麼需要可視化
13-3 -構建Spring Boot項目
springBoot構建web項目
查看官網：https://spring.io/projects/spring-boot
案例地址：
案例源碼：
package com.imooc.spark;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* 這是我們的第一個Boot應用
*/
@RestController
public class HelloBoot {
@RequestMapping(value = "/hello", method = RequestMethod.GET)
public String sayHello() {
return "Hello World Spring Boot...";
}
@RequestMapping(value = "/first", method = RequestMethod.GET)
public ModelAndView firstDemo() {
return new ModelAndView("test");
}
@RequestMapping(value = "/course_clickcount", method = RequestMethod.GET)
public ModelAndView courseClickCountStat() {
return new ModelAndView("demo");
}
}
啓動類的創建
源碼：
package com.imooc;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class WebApplication {
public static void main(String[] args) {
SpringApplication.run(WebApplication.class, args);
}
}
13-4 -Echarts概述
官網：http://echarts.baidu.com/examples/
13-5 -Spring Boot整合Echarts繪製靜態數據柱狀圖
跳轉到對應的HTML
@RequestMapping(value = "/first", method = RequestMethod.GET)
public ModelAndView firstDemo() {
return new ModelAndView("test");
}
13-6 -Spring Boot整合Echarts繪製靜態數據餅圖
案例地址：
跳轉到對應的html
@RequestMapping(value = "/course_clickcount", method = RequestMethod.GET)
public ModelAndView courseClickCountStat() {
return new ModelAndView("demo");
}
13-7 -項目目錄調整
目錄結構查看：
13-8 -根據天來獲取HBase表中的實戰課程訪問次數
第一步：導入HBase文件
<dependency>
<groupId>org.apache.hbase</groupId>
<artifactId>hbase-client</artifactId>
<version>1.2.0-cdh5.7.0</version>
</dependency>
第二步：開發HBASE工具類
源碼地址：
源碼：
package com.imooc.utils;
import org.apache.hadoop.conf.Configuration;
import org.apache.hadoop.hbase.client.*;
import org.apache.hadoop.hbase.filter.Filter;
import org.apache.hadoop.hbase.filter.PrefixFilter;
import org.apache.hadoop.hbase.util.Bytes;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
/**
* HBase操作工具類
*/
public class HBaseUtils {
HBaseAdmin admin = null;
Configuration conf = null;
/**
* 私有構造方法：加載一些必要的參數
*/
private HBaseUtils() {
conf = new Configuration();
conf.set("hbase.zookeeper.quorum", "hadoop000:2181");
conf.set("hbase.rootdir", "hdfs://hadoop000:8020/hbase");
try {
admin = new HBaseAdmin(conf);
} catch (IOException e) {
e.printStackTrace();
}
}
private static HBaseUtils instance = null;
public static synchronized HBaseUtils getInstance() {
if (null == instance) {
instance = new HBaseUtils();
}
return instance;
}
/**
* 根據表名獲取到HTable實例
*/
public HTable getTable(String tableName) {
HTable table = null;
try {
table = new HTable(conf, tableName);
} catch (IOException e) {
e.printStackTrace();
}
return table;
}
/**
* 根據表名和輸入條件獲取HBase的記錄數
*/
public Map<String, Long> query(String tableName, String condition) throws Exception {
Map<String, Long> map = new HashMap<>();
HTable table = getTable(tableName);
String cf = "info";
String qualifier = "click_count";
Scan scan = new Scan();
Filter filter = new PrefixFilter(Bytes.toBytes(condition));
scan.setFilter(filter);
ResultScanner rs = table.getScanner(scan);
for(Result result : rs) {
String row = Bytes.toString(result.getRow());
long clickCount = Bytes.toLong(result.getValue(cf.getBytes(), qualifier.getBytes()));
map.put(row, clickCount);
}
return map;
}
public static void main(String[] args) throws Exception {
Map<String, Long> map = HBaseUtils.getInstance().query("imooc_course_clickcount" , "20171022");
for(Map.Entry<String, Long> entry: map.entrySet()) {
System.out.println(entry.getKey() + " : " + entry.getValue());
}
}
}
13-9 -實戰課程訪問量domain以及dao開發
第一步：創建model
源碼地址：
源碼：
package com.imooc.domain;
import org.springframework.stereotype.Component;
/**
* 實戰課程訪問數量實體類
*/
@Component
public class CourseClickCount {
private String name;
private long value;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public long getValue() {
return value;
}
public void setValue(long value) {
this.value = value;
}
}
第二步：創建dao
源碼：
package com.imooc.dao;
import com.imooc.domain.CourseClickCount;
import com.imooc.utils.HBaseUtils;
import org.springframework.stereotype.Component;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
* 實戰課程訪問數量數據訪問層
*/
@Component
public class CourseClickCountDAO {
/**
* 根據天查詢
*/
public List<CourseClickCount> query(String day) throws Exception {
List<CourseClickCount> list = new ArrayList<>();
// 去HBase表中根據day獲取實戰課程對應的訪問量
Map<String, Long> map = HBaseUtils.getInstance().query("imooc_course_clickcount","20171022");
for(Map.Entry<String, Long> entry: map.entrySet()) {
CourseClickCount model = new CourseClickCount();
model.setName(entry.getKey());
model.setValue(entry.getValue());
list.add(model);
}
return list;
}
public static void main(String[] args) throws Exception{
CourseClickCountDAO dao = new CourseClickCountDAO();
List<CourseClickCount> list = dao.query("20171022");
for(CourseClickCount model : list) {
System.out.println(model.getName() + " : " + model.getValue());
}
}
}
13-10 -實戰課程訪問量Web層開發
源碼：
package com.imooc.spark;
import com.imooc.dao.CourseClickCountDAO;
import com.imooc.domain.CourseClickCount;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* web層
*/
@RestController
public class ImoocStatApp {
private static Map<String, String> courses = new HashMap<>();
static {
courses.put("112","Spark SQL慕課網日誌分析");
courses.put("128","10小時入門大數據");
courses.put("145","深度學習之神經網絡核心原理與算法");
courses.put("146","強大的Node.js在Web開發的應用");
courses.put("131","Vue+Django實戰");
courses.put("130","Web前端性能優化");
}
@Autowired
CourseClickCountDAO courseClickCountDAO;
// @RequestMapping(value = "/course_clickcount_dynamic", method = RequestMethod.GET)
// public ModelAndView courseClickCount() throws Exception {
//
// ModelAndView view = new ModelAndView("index");
//
// List<CourseClickCount> list = courseClickCountDAO.query("20171022");
// for(CourseClickCount model : list) {
// model.setName(courses.get(model.getName().substring(9)));
// }
// JSONArray json = JSONArray.fromObject(list);
//
// view.addObject("data_json", json);
//
// return view;
// }
@RequestMapping(value = "/course_clickcount_dynamic", method = RequestMethod.POST)
@ResponseBody
public List<CourseClickCount> courseClickCount() throws Exception {
List<CourseClickCount> list = courseClickCountDAO.query("20171022");
for(CourseClickCount model : list) {
model.setName(courses.get(model.getName().substring(9)));
}
return list;
}
@RequestMapping(value = "/echarts", method = RequestMethod.GET)
public ModelAndView echarts(){
return new ModelAndView("echarts");
}
}
13-11 -實戰課程訪問量實時查詢展示功能實現及擴展
源碼地址：
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>imooc_stat</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<!-- 引入 jQuery 文件 -->
<script src="js/jquery.js"></script>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position: absolute; top:50%; left: 50%; margin-top: -200px;margin-left: -300px"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title : {
text: '慕課網實戰課程實時訪問量統計',
subtext: '實戰課程訪問次數',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left'
},
series : [
{
name: '訪問次數',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: (function(){ //<![CDATA[
var datas = [];
$.ajax({
type: "POST",
url: "/imooc/course_clickcount_dynamic",
dataType: 'json',
async: false,
success: function(result) {
for(var i=0; i<result.length; i++) {
datas.push({"value":result[i].value, "name":result[i].name})
}
}
})
return datas;
//]]>
})(),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
spring Boot 整合Echars動態獲取HBASE的數據
1）動態的傳遞進去當天時間
a）在代碼中寫死
b)讓你查詢昨天的前天的咋辦?
在頁面中放一個時間插件（JQuery插件），默認只取當天的數據
2）自動刷新展示圖
每隔多久發送一個請求去刷新當天的數據供展示
統計慕課網當天實時課程從搜索引擎過來的點擊量
數據已經在HBASE中有的
自己通過Echarts整合springboot方式來實現
13-12 -Spring Boot項目部署到服務器上運行
第一步：打包 mvn clean package -DskipTests
第二步：將jar包拷貝到服務器上
scp web-0.0.0.1-SNAPSHOT.jar [email protected]: ~/lib/
第三步：啓動jar
jar spaktrain-1.0.jar web-0.0.1-SNAPSHOT.jar
13-13 -阿里雲DataV數據可視化介紹
官網：https://data.aliyun.com/visual/datav
DataV功能說明
1）點擊量分省排名/運營商佔比
Spark SQl項目實戰課程：通過IP能解析到省份，城市，運營商
2）瀏覽器訪問佔比
hadoop項目：userAgent
13-14 -DataV展示統計結果功能實現