大数据Web可视化分析系统开发

下载地址

https://tomcat.apache.org/download-70.cgi

大数据Web可视化分析系统开发

打开我们的idea

大数据Web可视化分析系统开发

这些的话都可以按照自己的需求来修改

大数据Web可视化分析系统开发

在这里新建包

大数据Web可视化分析系统开发

新建一个java类

大数据Web可视化分析系统开发

package com.spark.service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class WeblogService {
    public static void queryWeblogs() throws Exception {
        Connection conn=null;
        PreparedStatement pst=null;
        String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";
        String username="root";
        String password="root";
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn= DriverManager.getConnection(url,username,password);
            String query_sql="select titleName,count from webCount where 1=1 order by count desc limit 20";
            pst=conn.prepareStatement(query_sql);
            ResultSet rs=pst.executeQuery();
             int i=0;
            while (rs.next()){
                String titleName= rs.getString("titleName");
                String titleCount= rs.getString("count");
                WeblogSocket.titleName[i]=titleName;
                WeblogSocket.titleCount[i]=titleCount;
                ++i;
            }
        }catch (Exception e){
              e.printStackTrace();
        }
    }
}

再新建一个类

大数据Web可视化分析系统开发

我们把tomcat包加载进来

大数据Web可视化分析系统开发

把这些包拷贝到工程目录下

大数据Web可视化分析系统开发

还需要把这些包引进来

大数据Web可视化分析系统开发

写入代码

大数据Web可视化分析系统开发

package com.spark.service;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WeblogSocket {
         public static String[] titleName = new String[20];
         public static String[] titleCount = new String[20];
         //public static String[] titleSum = new String[1];
    @OnMessage
        public void onMessage(String message,Session session)
            throws Exception {
          while (true){
              WeblogService.queryWeblogs();
               Map<String,Object> map =new HashMap<String, Object>();
              map.put("titleName", titleName);
              map.put("titleCount",titleCount);
             // map.put("titleSum", titleSum);

              session.getBasicRemote().
                      sendText(JSON.toJSONString(map));
              Thread.sleep(5000);
              map.clear();

          }
    }


    @OnOpen
    public void onOpen () {
        System.out.println("Client connected");
    }
    @OnClose
    public void onClose () {
        System.out.println("Connection closed");
    }
}

大数据Web可视化分析系统开发

下载地址

http://echarts.baidu.com/download.html

大数据Web可视化分析系统开发

官网地址 http://jquery.com/

大数据Web可视化分析系统开发

我们拷贝到webapp底下

大数据Web可视化分析系统开发

我们进到echars的官方实例去看看

http://echarts.baidu.com/examples/#chart-type-bar

大数据Web可视化分析系统开发

点进来

大数据Web可视化分析系统开发

把左边的代码修改之后

大数据Web可视化分析系统开发

新建一个html文件

大数据Web可视化分析系统开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.2.1.js"></script>

    <style>
        body{
            text-align:center;
            background-color: #dbdddd;
        }
        .div{ margin:0 auto; width:1000px; height:800px; border:1px solid #F00}
        /* css注释：为了观察效果设置宽度 边框 高度等样式 */
    </style>

</head>
<body>
<h1>卡弗卡大数据 — 新闻网话题用户浏览实时统计分析</h1>
<div>
    <div id="main" style="width:880px;height: 700px;float:left;">第一个</div>
    <div id="sum" style="width:800px;height: 700px;float:left;">第二个</div>
</div>

<div>
    <input type="submit" value="实时分析" onclick="start()" />
</div>


<div id="messages"></div>
<script type="text/javascript">

    var webSocket = new WebSocket('ws://localhost:8888/websocket');
    var myChart = echarts.init(document.getElementById('main'));
    var myChart_sum = echarts.init(document.getElementById('sum'));

    webSocket.onerror = function(event) {
        onError(event)
    };
    webSocket.onopen = function(event) {
        onOpen(event)
    };
    webSocket.onmessage = function(event) {
        onMessage(event)
    };
    function onMessage(event) {
        var sd = JSON.parse(event.data);
        processingData(sd);
        titleSum(sd.titleSum);
    }
    function onOpen(event) {
    }

    function onError(event) {
        alert(event.data);
    }

    function start() {
        webSocket.send('hello');
        return false;
    }


    function processingData(json){

        var option = {
            backgroundColor: '#ffffff',//背景色
            title: {
                text: '新闻话题浏览量【实时】排行',
                subtext: '数据来自搜狗实验室',
                textStyle: {
                    fontWeight: 'normal',              //标题颜色
                    color: '#408829'
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['浏览量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data:json.titleName
            },
            series: [
                {
                    name: '浏览量',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    itemStyle:{ normal:{color:'#f47209'} },
                    data: json.titleCount
                }

            ]
        };
        myChart.setOption(option);

    }


    function titleSum(data){

        var option = {
            backgroundColor: '#fbfbfb',//背景色
            title: {
                text: '新闻话题曝光量【实时】统计',
                subtext: '数据来自搜狗实验室'
            },


            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    max:50000,
                    detail: {formatter:'{value}个话题'},
                    data: [{value: 50, name: '话题曝光量'}]
                }
            ]
        };

        option.series[0].data[0].value = data;
        myChart_sum.setOption(option, true);

    }




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

把这两个类的代码修改一下

大数据Web可视化分析系统开发

package com.spark.service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.HashMap;
import java.util.Map;

public class WeblogService {

    static String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";
    static String username="root";
    static String password="root";

    public  Map<String,Object> queryWeblogs()  {
        Connection conn=null;
        PreparedStatement pst=null;
        String[] titleNames = new String[20];
        String[] titleCounts = new String[20];
        Map<String,Object> retMap= new HashMap<String,Object>();
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn= DriverManager.getConnection(url,username,password);
            String query_sql="select titleName,count from webCount where 1=1 order by count desc limit 20";
            pst=conn.prepareStatement(query_sql);
            ResultSet rs=pst.executeQuery();

            int i=0;
            while (rs.next()){
                String titleName= rs.getString("titleName");
                String titleCount= rs.getString("count");
              titleNames[i]=titleName;
              titleCounts[i]=titleCount;
                ++i;
            }
            retMap.put("titleName", titleNames);
            retMap.put("titleCount",titleCounts);

        }catch (Exception e){
              e.printStackTrace();
        }
        return retMap;
    }

    public  String[] titleCount()  {
        Connection conn=null;
        PreparedStatement pst=null;
        String[] titleSums = new String[1];
        Map<String,Object> retMap= new HashMap<String,Object>();
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn= DriverManager.getConnection(url,username,password);
            String query_sql="select count(1) titleSum from webCount ";
            pst=conn.prepareStatement(query_sql);
            ResultSet rs=pst.executeQuery();

          if (rs.next()){
                String titleSum= rs.getString("titleSum");
                  titleSums[0]=titleSum;
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return titleSums;
    }

}

package com.spark.service;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WeblogSocket {
        WeblogService  weblogService = new WeblogService();
    @OnMessage
        public void onMessage(String message,Session session)
            throws Exception {
          while (true){
               Map<String,Object> map =new HashMap<String, Object>();
              map.put("titleName", weblogService.queryWeblogs().get("titleName"));
              map.put("titleCount",weblogService.queryWeblogs().get("titleCount"));
              map.put("titleCount",weblogService.titleCount());
              session.getBasicRemote().
                      sendText(JSON.toJSONString(map));
              Thread.sleep(5000);
              map.clear();
          }
    }
    @OnOpen
    public void onOpen () {
        System.out.println("Client connected");
    }
    @OnClose
    public void onClose () {
        System.out.println("Connection closed");
    }
}

我们之前的结构化流的处理我们还是跟web分开

大数据Web可视化分析系统开发

报了这么一个错误，我们就是把那个文件干掉就行了

大数据Web可视化分析系统开发

我们再来一次

大数据Web可视化分析系统开发

把多余的包剔除掉

大数据Web可视化分析系统开发

报错了

大数据Web可视化分析系统开发

是因为相同的包冲突的原因

大数据Web可视化分析系统开发

我们就导这些包进来就可以了

大数据Web可视化分析系统开发

我们再编译一次

大数据Web可视化分析系统开发

这次编译通过了

把刚刚打的包上传上来

大数据Web可视化分析系统开发

接下来我们重新建一个web工程

大数据Web可视化分析系统开发

从原来的拷贝过去

大数据Web可视化分析系统开发

把js也拷贝过去

大数据Web可视化分析系统开发

把lib包拷贝过去

大数据Web可视化分析系统开发

把index.html文件也拷贝进来到web目录下

大数据Web可视化分析系统开发

我们把web项目的包引进去

大数据Web可视化分析系统开发

下面配置一下我们的tomcat

大数据Web可视化分析系统开发

我们还要把tomcat的包加载进来

大数据Web可视化分析系统开发

这样子我们的web项目就没有问题了

大数据Web可视化分析系统开发

我们启动一下看看服务是否正常的

大数据Web可视化分析系统开发

可以看到1099端口已经在使用了，那我们就换个端口1098 大数据Web可视化分析系统开发

大数据Web可视化分析系统开发

这明显不是我们想要的结果，这个界面不是我们的index.html,为了和前面的项目区分开来，我们用的端口号最好不要跟前面的一样

大数据Web可视化分析系统开发

我们再跑一次tomcat

大数据Web可视化分析系统开发

没有报任何错误

大数据Web可视化分析系统开发

这才是我们想要的结果

不过这个经过分析是因为我前面的sparkStu工程还在跑着的原因，我忘记停下来了！

我们按下F12

大数据Web可视化分析系统开发

出现错误了

我们的目录有问题

大数据Web可视化分析系统开发

把这个目录激活

大数据Web可视化分析系统开发

改下这里

大数据Web可视化分析系统开发

改过来就不报错了

把这个工程改成maven工程

大数据Web可视化分析系统开发

这样就把一个普通的工程变成了一个maven工程

大数据Web可视化分析系统开发

添加这个依赖包

大数据Web可视化分析系统开发

<dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

然后我们再rebuid一下

大数据Web可视化分析系统开发

再运行一下tomcat

大数据Web可视化分析系统开发

是没什么问题，但是这个数据真他妈的恶心

大数据Web可视化分析系统开发

在sparkStu_web工程里面加上这一段

大数据Web可视化分析系统开发

这里把最后修改的代码附上（sparkStu_web工程的）

package com.spark.service;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@ServerEndpoint("/websocket")
public class WeblogSocket {

    WeblogService  weblogService = new WeblogService();
    @OnMessage
    public void onMessage(String message, Session session)
            throws IOException, InterruptedException {
        while(true){
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("titleName", weblogService.queryWeblogs().get("titleName"));
            map.put("titleCount",weblogService.queryWeblogs().get("titleCount"));
            map.put("titleSum", weblogService.titleCount());

            session.getBasicRemote().
                    sendText(JSON.toJSONString(map));
            Thread.sleep(1000);
            map.clear();
        }
    }
    @OnOpen
    public void onOpen () {
        System.out.println("Client connected");
    }
    @OnClose
    public void onClose () {
        System.out.println("Connection closed");
    }
}

package com.spark.service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by Administrator on 2017/10/17.
 */
public class WeblogService {
    static String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";
    static String username="root";
    static String password="root";

    public  Map<String,Object> queryWeblogs() {
        Connection conn = null;
        PreparedStatement pst = null;
        String[] titleNames = new String[30];
        String[] titleCounts = new String[30];
        Map<String,Object> retMap = new HashMap<String, Object>();
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            String query_sql = "select titleName,count from webCount where 1=1 order by count desc limit 30";
            pst = conn.prepareStatement(query_sql);
            ResultSet rs = pst.executeQuery();
            int i = 0;
            while (rs.next()){
                String titleName = rs.getString("titleName");
                String titleCount = rs.getString("count");
                titleNames[i] = titleName;
                titleCounts[i] = titleCount;
                ++i;
            }
            retMap.put("titleName", titleNames);
            retMap.put("titleCount", titleCounts);
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try {
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }


            }catch(Exception e){
                e.printStackTrace();
            }
        }
             return retMap;
    }

    public  String[] titleCount() {
        Connection conn = null;
        PreparedStatement pst = null;
        String[] titleSums = new String[1];
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            String query_sql = "select count(1) titleSum from webCount";
            pst = conn.prepareStatement(query_sql);
            ResultSet rs = pst.executeQuery();
            if(rs.next()){
                String titleSum = rs.getString("titleSum");
                titleSums[0] = titleSum;
            }
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            }catch(Exception e){
                e.printStackTrace();
            }
        }
        return titleSums;
    }

}