Day7-hive数据分析+echart信息展示
数据分析的主要步骤为：
1.爬取的数据导入hive数据库
2.在hive数据库中，计算 获取数据 ，成表
3.利用sqoop将hi ve中的表 转存为 mysql表就可以使用了
最后结果为：
信息展示：调用echarts
代码如下：
<%@page import="java.util.List"%>
<%@page import="my.dao.AllDao"%>
<%@page import="my.Bean.*"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Comparator"%>
<%@page import="java.util.Collections"%>
<%@page import="javafx.print.Collation"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%
//String name=request.getParameter("name");
String name=(String)session.getAttribute("name");
AllDao guQuanDao=new AllDao();
List<First> list=guQuanDao.First();
List<Second> list0=guQuanDao.Second();
List<Third> list1=guQuanDao.Third();
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/echarts.min.js"></script>
<title>在此处插入标题</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #ddd;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
background: #fff;
width: 100%;
height: 50px;
font-size: 20px;
line-height: 100px;
text-align: center;
border-bottom: 1px solid #f60;
}
.box{
margin: 0 auto;
width: 1200px;
}
.fl_l{
width: 200px;
float: left;
border: 1px solid #f4f4f4;
background: #fff;
}
.fl_l li a{
border-bottom: 1px solid #eee;
text-align: center;
display: block;
color: #333;
font-size: 14px;
line-height: 60px;
}
.fl_l li.active a{
background: #f60;
color: #fff;
}
.fl_r{
float: right;
width: 960px;
}
.fl_r li{
margin-bottom: 30px;
background: #fff;
font-size: 50px;
line-height: 300px;
display: block;
}
.banner{
background: #fff;
width: 100%;
height: 600px;
font-size: 40px;
line-height: 600px;
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="nav">nav</div>
<div class="box">
<ul class="fl_l">
<li class="active"><a href="##">菜单1</a></li>
<li><a href="##">菜单2</a></li>
<li><a href="##">菜单3</a></li>
</ul>
<ul class="fl_r">
<li style="height: 300px;"><div id="First" style="width:500px;height: 300px;"></div></li>
<li style="height: 300px;"><div id="Second" style="width:1000px;height: 300px;"></div></li>
<li style="height: 300px;"><div id="Third" style="width:500px;height: 300px;"></div></li>
</ul>
<div style="clear: both;"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//设置标杆
var _line=parseInt($(window).height()/3);
$(window).scroll(function(){
//滚动730px，左侧导航固定定位
if ($(window).scrollTop()>730) {
$('.fl_l').css({'position':'fixed','top':10})
}else{
$('.fl_l').css({'position':'','top':''})
};
$('.fl_l li').eq(0).addClass('active');
//滚动到标杆位置,左侧导航加active
$('.fl_r li').each(function(){
var _target=parseInt($(this).offset().top-$(window).scrollTop()-_line);
var _i=$(this).index();
if (_target<=0) {
$('.fl_l li').removeClass('active');
$('.fl_l li').eq(_i).addClass('active');
}
//如果到达页面底部，给左侧导航最后一个加active
else if($(document).height()==$(window).scrollTop()+$(window).height()){
$('.fl_l li').removeClass('active');
$('.fl_l li').eq($('.fl_r li').length-1).addClass('active');
}
});
});
$('.fl_l li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var _i=$(this).index();
$('body, html').animate({scrollTop:$('.fl_r li').eq(_i).offset().top-_line},500);
});
});
</script>
<script type="text/javascript">
var dom = document.getElementById('First');
var chart = echarts.init(dom);
option = {
xAxis: {
type: 'category',
data: [
<%
for(First first:list){
%>
'<%=first.getTime()%>',
<%
}
%>
]
},
yAxis: {
type: 'value'
},
series: [{
data: [<%
for(First first:list){
%>
<%=first.getNum()%>,
<%
}
%>],
type: 'line'
}]
};
chart.setOption(option);
</script>
<script type="text/javascript">
var dom = document.getElementById('Second');
var chart = echarts.init(dom);
option = {
xAxis: {
type: 'category',
data: [<%
for(Second second:list0){
%>
'<%=second.getGovname()%>',
<%
}
%>]
},
yAxis: {
type: 'value'
},
series: [{
data: [<%
for(Second second:list0){
%>
'<%=second.getNum()%>',
<%
}
%>],
type: 'bar'
}]
};
chart.setOption(option);
</script>
<script type="text/javascript">
var dom = document.getElementById('Third');
var chart = echarts.init(dom);
option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
<%
for(Third third:list1){
%>
{value: <%=third.getNum()%>, name: '<%=third.getLeixing()%>'},
<%
}
%>
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
chart.setOption(option);
</script>
<div style="text-align:center;">
<p><a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
效果如下：
浙公网安备 33010602011771号