Day7-hive数据分析+echart信息展示

  数据分析的主要步骤为:

1.爬取的数据导入hive数据库

2.在hive数据库中,计算 获取数据 ,成表

3.利用sqoop将hi ve中的表   转存为 mysql表就可以使用了

最后结果为:

Day7-hive数据分析+echart信息展示

信息展示:调用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>

效果如下:

Day7-hive数据分析+echart信息展示Day7-hive数据分析+echart信息展示

上一篇:python学习day7笔记


下一篇:2020 CCPC-Wannafly Winter Camp Day7 ---A.序列