0
点赞
收藏
分享

微信扫一扫

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

幸福的无所谓 2022-06-20 阅读 50
javasqljson云平台云计算

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

 

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

 

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

下载地址

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

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

 

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

 

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

 

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

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

 

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

 

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

 

 

打开我们的idea

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

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

 

 

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

 

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

 

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

 

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

 

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

 

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

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

 

 

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

 

 

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

 

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

 

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

 

 

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

 

在这里新建包

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

 

 新建一个java类

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

 

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

 

 

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可视化分析系统开发_java_27

 

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

 

 

我们把tomcat包加载进来

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

 还需要把这些包引进来

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

 

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

 

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

 

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

 

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

 

 写入代码

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

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可视化分析系统开发_java_43

下载地址

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

 

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

 

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

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

我们拷贝到webapp底下

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

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

 

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

 

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

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

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

 

点进来

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

 

 把左边的代码修改之后

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

 

 新建一个html文件

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

 

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

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

 

<!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可视化分析系统开发_json_55

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可视化分析系统开发_sql_56

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

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

 

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

 

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

 

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

 

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

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

 

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

 

 我们再来一次

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

 

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

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

 

 把多余的包剔除掉

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

 

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

 

 

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

 

 

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

 

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

 

报错了

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

 

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

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

 

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

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

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

 

 

我们再编译一次

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

 

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

 这次编译通过了

 

 把刚刚打的包上传上来

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

 

 

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

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

 

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

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

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

 

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

 

 

从原来的拷贝过去

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

 

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

 

 

 把js也拷贝过去

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

 

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

 

 把lib包拷贝过去

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

 

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

 

 

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

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

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

 

我们把web项目的包引进去

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

 

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

 

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

 

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

 

 下面配置一下我们的tomcat

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

 

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

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

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

 

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

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

 

 

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

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

 

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

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

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

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

 

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

 

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

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

 

 我们再跑一次tomcat

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

 

 没有报任何错误

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

 这才是我们想要的结果

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

 

 

我们按下F12

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

出现错误了

我们的目录有问题

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

 

 把这个目录激活

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

 

改下这里

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

 

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

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

 改过来就不报错了

 

把这个工程改成maven工程

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

 

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

 

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

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

 

添加这个依赖包

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

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

 

 

然后我们再rebuid一下

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

 

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

 

再运行一下tomcat

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

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

 

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

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

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

 

 

 在sparkStu_web工程里面加上这一段

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

 

 这里把最后修改的代码附上（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;
    }

}

 

 

启动tomcat

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

 

这边的工程我们也启动

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

 

 

 

让节点2的数据也跑起来这个时候保证kafka,flume等进程的开启，前面已经讲过很多次了

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

 

 

把表中的数据清除

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

 

 

可以看到实时监控是没有数据的

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

 

经过漫长的等待

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

 

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

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

 

 

 看到实时在监控，数据发生变化

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

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

 

 

整个项目到现在为止全部结束了，真的好累啊，现在是凌晨3点了，

我真的感到很疲惫了，该回宿舍休息了，实验室的周围是那么安静的！！！！！！

举报

相关推荐

基于大数据的全国热门景点数据可视化分析系统

jvm

图数据可视化分析组件

数据可视化可视化数据库js库3d虚拟化云计算

基于大数据的电影可视化分析及电影推荐

推荐系统数据分析Python大数据电影可视化分析后端开发

Python爬虫以及数据可视化分析

android前端后端

世界杯数据可视化分析

数据分析数据挖掘python信息可视化大数据

沉浸式体验数据可视化分析

数据分析数据可视化数据大数据

大数据开源的可视化分析工具，主要有哪些？

大数据可视化大数据分析工具ci大数据人工智能开源

第十届软件杯（民航大数据在线可视化分析系统）

pythonflaskechartspandas机器学习

大数据可视化分析建模：每个人都是数据分析师

信息可视化数据分析建模大数据可视化JavaScript前端开发

Python可视化分析项目

spring
0 条评论