首页 > 其他分享 >日志数据分析和数据的可视化处理

日志数据分析和数据的可视化处理

时间：2022-10-20 20:01:34浏览次数：96  
标签：数据分析 id0 push json 可视化 result var import 日志

数据分析：在HIVE统计下列数据。

（1）统计最受欢迎的视频/文章的Top10访问次数 （video/article）

（2）按照地市统计最受欢迎的Top10课程 （ip）

（3）按照流量统计最受欢迎的Top10课程 （traffic）

1、insert overwrite table data1_1 select count(*),type,id from data0 group by id order by count(*) desc limit 0,10;

　　表的结构大致如下：建表时记得需要修改为按逗号’ , ‘ 进行分隔读取，如下：

Create table test2(day_id varchar(30), sale_nbr varchar(30), buy_nbr varchar(30), cnt varchar(30), round varchar(30)) row format serde 'org.apache.hadoop.hive.serde2.OpenCSVSerde' WITH SERDEPROPERTIES

    (

        "separatorChar"=","

    )

STORED AS TEXTFILE;

 

 

 

2、create table if not exists data_ip2 comment  "ip" as select   ip, id, count(traffic) as cnt_traffic from data2 group by ip,id order by cnt_traffic desc ;

　　这个也是这次测试中比较麻烦的一步了，题目中要求按照地势求出最受欢迎的top10，按照每个ip相同的地方算一个地势，工作量非常大。所以后面的可视化阶段我设置了点击事件用来展示。下图展示的是所有地势id的流量出现次数。

 

 

 

3、 insert overwrite table data1_3 select sum(traffic),type,id from data0 group by type,id order by sum(traffic) desc limit 0,10;

　　表三和表二基本一致。

到这里要的数据都展示出来了，下面就要开始可视化的操作了：

 

 

 表一圆柱图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>圆柱图</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="JS/echarts.js"></script>
  <script src="JS/jquery-3.1.1.js"></script><!--js文件在最后都有哦-->
  <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>

<div id="main" class="list-main">
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="areaone" style="width: 1500px;height:1500px;"></div>
  <script type="text/javascript">
    var count0 = [];//定义数组用来接受后台的数据，数组名随意啦
    var type0 = [];
    var id0 = [];
    var url = "selectdata1";
    <!--使用ajax动态获取数据，将获取的数据放到数组中-->
    $.ajax({
      async: false,
      type: "GET",
      url: url,
      dataType: 'json',
      contentType: "application/json;charset=UTF-8",
      success: function(result){
        console.log(result);
        for (var i = 0; i < result.length; i++) {
          count0.push(result[i].count0);
          console.log(result[i].count0);
          type0.push(result[i].type0);
          console.log(result[i].type0);
          id0.push(result[i].id0);
          console.log(result[i].id0);
        }
      }
    });
    //下面就是官网的数据了进行一些简单的修改就可以了
    var myChartone = echarts.init(document.getElementById('areaone'));
    // 指定图表的配置项和数据
    var optionone = {
      color: ['#c23531','#2f4554', '#61a0a8'],
      title: {
        text: '柱状图'
      },
      tooltip: {},
      legend: {
        data: ['video'],
        orient: 'horizontal',
        itemGap: 40,
        textStyle: {
          color: 'blue',
          fontSize: '20px',
          fontWeight: 700
        }
      },
      xAxis: {
        data: id0//x轴
      },
      yAxis: {//y轴不用设置（2d）
      },
      series: [{
        name: 'count',
        type: 'bar',
        data: count0//数据
      }]
    };
    myChartone.setOption(optionone);
  </script>
</div>
</body>
</html>

表二饼图

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>圆柱图</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="JS/echarts.js"></script>
    <script src="JS/jquery-3.1.1.js"></script><!--js文件在最后都有哦-->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>

<div id="main" class="list-main">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="areaone1" style="width: 2000px;height:1000px;"></div>
    <div id="areaone" style="width: 2000px;height:1000px;"></div>
    <script type="text/javascript">
        var ip0 = [];//定义数组用来接受后台的数据，数组名随意啦
        var sumtraffic = [];
        var id0=[];
        var counttraffic=[];
        var str=new Array();
        var url = "selectdata2";
        <!--使用ajax动态获取数据，将获取的数据放到数组中-->
        $.ajax({
            async: false,
            type: "GET",
            url: url,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function(result){
                for (var i = 0; i < result.length; i++) {
                    ip0.push(result[i].ip0);
                    sumtraffic.push(result[i].sumtraffic);
                    str.push({name:result[i].sumtraffic,value:result[i].ip0})
                }
            }
        });
        var chartDom = document.getElementById('areaone');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '地市Top10课程',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'ip',
                    type: 'pie',
                    radius: '50%',
                    data:str,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        //饼图点击事件
        myChart.on("click", pieConsole);
        function pieConsole(param) {
            name=option.series[param.seriesIndex].data[param.dataIndex].name;
            value=option.series[param.seriesIndex].data[param.dataIndex].value;
            var str1=new Array();
            $.ajax({
                async: false,
                type: "GET",
                url: "Servletiii",
                data: {name1:name,jk:"1"},
                dataType: 'json',
                contentType: "application/json;charset=UTF-8",
                success: function(result){
                    console.log(result);
                    for (var i = 0; i < result.length; i++) {
                        id0.push(result[i].id0);
                        counttraffic.push(result[i].counttraffic);
                        str1.push({name:result[i].counttraffic,value:result[i].id0})
                    }
                }
            });
            var chartDom = document.getElementById('areaone1');
            var myChart1 = echarts.init(chartDom);
            var option1;
            option1 = {
                title: {
                    text: '最受欢迎的Top10课程',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data:str1,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            option && myChart1.setOption(option1);
        }
        option && myChart.setOption(option);
    </script>
</div>
</body>
</html>

表3折线图

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>条形图</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="JS/echarts.js"></script>
    <script src="JS/jquery-3.1.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>

<div id="main" class="list-main">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="areaone1" style="width: 2000px;height:1000px;"></div>
    <script type="text/javascript">
        var traffic0 = [];
        var type0 = [];
        var id0 = [];
        var url = "selectdata3";
        <!--使用ajax动态获取数据，将获取的数据放到数组中-->
        $.ajax({
            async: false,
            type: "GET",
            url: url,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function(result){
                console.log(result);
                for (var i = 0; i < result.length; i++) {
                    traffic0.push(result[i].traffic0);
                    type0.push(result[i].type0);
                    id0.push(result[i].id0);
                    console.log(result[i].traffic0)
                }
            }
        });
        var chartDom = document.getElementById('areaone1');
        var myChart = echarts.init(chartDom);
        var option;
        // prettier-ignore
        const data = []
        for(var i=0;i<id0.length;i++)
        {
            data.push([id0[i],traffic0[i]]);
            // console.log(data);
        }
        const test.data1 = []
        for(var i=0;i<id0.length;i++)
        {
            data1.push([traffic0[i],traffic0[i]]);
            // console.log(data);
        }
        const dateList = data.map(function (item) {
            return item[0];
        });
        const valueList = data1.map(function (item) {
            return item[1];
        });
        option = {
            // Make gradient line here
            visualMap: [
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                },
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: dateList.length - 1
                }
            ],
            title: [
                {
                    left: 'center',
                    text: '流量统计最受欢迎的Top10课程 '
                },
                {
                    top: '55%',
                    left: 'center',
                }
            ],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    data: dateList
                },
                {
                    data: dateList,
                    gridIndex: 1
                }
            ],
            yAxis: [
                {},
                {
                    gridIndex: 1
                }
            ],
            grid: [
                {
                    bottom: '60%'
                },
                {
                    top: '60%'
                }
            ],
            series: [
                {
                    type: 'line',
                    name:'访问次数',
                    showSymbol: false,
                    data: valueList
                },
                {

                }
            ]
        };

        option && myChart.setOption(option);

    </script>
</div>
</body>
</html>

后台的话我就拿表二举例吧其余的基本一致：

servlet

package Servlet;

import Bean.bean;
import Bean.bean01;
import Bean.bean02;
import Bean.bean03;
import Dao.select;
import com.alibaba.fastjson.JSON;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;

@WebServlet(name = "selectdata2", value = "/selectdata2")
public class selectdata2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setContentType("text/html;charset=utf-8");
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        ArrayList<bean02> book = new ArrayList<bean02>();
        select dao=new select();
        try {
            dao.selectdata2(book);
            System.out.println("1");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
            System.out.println("2");
        } catch (SQLException e) {
            e.printStackTrace();
            System.out.println("3");
        }
        System.out.println("*****************");
        String json = JSON.toJSONString(book);
        response.getWriter().write(json);
    }
}

Dao方法

    public void selectdata2(ArrayList<bean02> book) throws ClassNotFoundException, SQLException {
        Connection connection= Util.util.getConnection();
        String sql1="SELECT ip0,sumtraffic FROM data2 ORDER BY CAST(sumtraffic  AS UNSIGNED) DESC limit 10";
//        String sql1="SELECT * FROM text3_1 ORDER BY RAND() LIMIT 100";
        PreparedStatement pre=null;
        PreparedStatement ps=connection.prepareStatement(sql1);
        ResultSet rs =  ps.executeQuery();//获取结果集
        while(rs.next()) {
            bean02 A=new bean02();
            A.setSumtraffic(rs.getString(1));
            A.setIp0(rs.getString(2));
//            A.setRound(rs.getString(4));
            book.add(A);
        }
    }

其它的话可以参考课堂测试—数据可视化 - O_O似曾相识 - 博客园 (cnblogs.com)

标签：数据分析,id0,push,json,可视化,result,var,import,日志
From： https://www.cnblogs.com/jyt604743080/p/16811052.html

相关文章

  • .net core中使用nlog替代默认日志
    1、添加引用nlog.config和Nlog.Web.AspNetCore 2、配置NLog配置文件<?xmlversion="1.0"encoding="utf-8"?><nlogxmlns="http://www.nlog-project.org/schemas/......
  • 实习日志
    熟悉项目：1.C#中检查NULL符号【?.】2.关于委托，可以是一对一的，也可以是一对多的；一对一：=一对多：+=3.VS与unity的联合调试1）vs中打断点；2）vs中点击开始调试；3）启动unity工......
  • 我用《觉醒年代》做数据分析！
    作者：牧小熊，华中农业大学，Datawhale成员最近有同学和我说《觉醒年代》好好看，于是我后知后觉地查了一下，不查不知道，这部剧豆瓣评分9.3，微博讨论度26亿+。《觉醒年代》都是哪些人......
  • docker logs命令查看容器日志的时候，如何将标准输出和错误输出进行区分查看？
    以nginx为例子:access.log关联到/dev/stdouterror.log关联到/dev/stderr 当以容器的方式运行的时候，执行dockerlogs查看日志的时候，发现是标准输出日志和错误日志......
  • CentOS8 通过 loganalyzer 展示数据库中的日志
    loganalyzer：loganalyzer是用php语言实现的日志管理系统，可将MySQL数据库的日志用丰富的WEB方式进行展示官网：https://loganalyzer.adiscon.com环境准备：日志客户端：10.......
  • 10scrapy的日志信息与配置
    scrapy的日志信息与配置学习目标：了解scrapy的日志信息掌握scrapy的常用配置掌握scrapy_redis配置了解scrapy_splash配置了解scrapy_redis和scrapy_splash配合使......
  • 如何将docker镜像的日志输出到标准输出/错误输出？（将自定义的应用日志输出到控制台）
    对于一个nginx容器，如果要通过dockerlogs命令，直接查看容器的日志，该如何来操作？ 非常的简单，就是将应用（nginx）生成的日志输出到标准输出或者错误输出。 那么，具体的实现......
  • 基于强化学习的测试日志智能分析实践
    摘要：测试日志智能分析是提升智能化测试效率的一个关键步骤。本文分享自华为云社区《【智能化测试专题】基于强化学习的测试日志智能分析实践》，作者：DevAI。随着软件规模......
  • 基于强化学习的测试日志智能分析实践
    摘要：测试日志智能分析是提升智能化测试效率的一个关键步骤。本文分享自华为云社区《​​【智能化测试专题】基于强化学习的测试日志智能分析实践​​》，作者：DevAI。随着软......
  • 日志管理工具 - journalctl使用详解
    说明：  CentOS7以后版，利用Systemd统一管理所有Unit的启动日志。可以只用journalctl一个命令，查看所有日志（内核日志和应用日志）。journalctl配置文件：/etc/systemd/jo......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99