项目介绍

本项目总体分为

  1. 平台搭建
  2. 模拟数据源生成
  3. 实时流数据处理
  4. 实时数据大屏

这几个部分，我将分成几个博客分别介绍这些部分的工作，本文主要介绍最后一个部分，实时数据大屏。
前面的几篇文章已经将平台的搭建，数据模拟生成，流数据处理部分做了详细的介绍，这篇文章主要是对前面所做的工作进行一个升华，关分析出数据不够直观，而能将所做的东西更加直观的表达出来就需要进行可视化了，下面我将为大家介绍可视化部分的工作

平台搭建，具体可以看平台搭建
模拟数据源生成，具体可以看模拟数据源生成
实时流数据处理，具体可以看实时流数据处理
项目下载地址下载

环境介绍

首先还是对环境介绍一下，这部分主要使用的将是html，php，js，css等做网站所需要的一些语言及工具，由于需要进行异步数据加载，所以还需要一个本地的服务器，本文使用的是phpstudy，主要是这个工具还集成了mysql，能简化不少我们的工作，当然如果自己拥有服务器，那完全是可以将这个部署在服务器上面的

首先我们先要安装phpstudy，这里不对具体的安装过程进行介绍，安装完成后我们可以进入网站的根目录
在这里插入图片描述
在这个目录下新建一个目录即可作为我们的网站目录了

然后我们可以使用phpstudy带的站点域名管理为我们的网站设置一个域名，其中的网站目就是我们刚刚创建的网站目录
在这里插入图片描述
在hosts里面是需要加入IP和域名的映射的，如：

127.0.0.1 www.sshstudy3.com

这样就可以在浏览器里面通过访问域名来访问我们要做的网站了

接下来我们需要去创建数据库，打开phpMyAdmin，我们可以进入数据库管理界面
在这里插入图片描述
这里的账号密码默认都是root
在这里插入图片描述
进入后我们可以看到如下界面
在这里插入图片描述
在这里可以创建数据库，或者进行数据库的访问等，不再赘述

到这里基本需要使用到的环境就基本完成了，接下来就是代码的部分

代码部分

代码部分由于过多，这里只能给出一部分重要的代码
首先先给大家看一下我们网站的整体结构
在这里插入图片描述
css下面放css文件，data下面放的是我们前面实时流处理生成的统计数据，font下面放的是字体文件，images下面放的是图片文件，js下面放的是编写的JavaScript文件，lib下面放的是调用的一些JavaScript文件，theme下面放的是主题文件，index.php是我们网站的首页

index.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="lib/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })


    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({ fontSize: whei / 20 })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 20 })
        });
    });
</script>

<script type="text/javascript">
    
</script>

<script type="text/javascript" src="lib/echarts.min.js"></script>
<script language="JavaScript" src="js/show_amount_Price.js"></script>
<script language="JavaScript" src="js/global_variable.js"></script>
<script language="JavaScript" src="js/show.js"></script>
<script language="JavaScript" src="js/map.js"></script>
<!-- <script language="JavaScript" src="theme/shine.js"></script> -->

<body>
    <div class="canvas" style="opacity: .2">
        <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
    </div>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>商品交易数据实时处理大屏</h1>
        <div class="weather"><!--<img src="images/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

        <script>
            var t = null;
            t = setTimeout(time, 1000); 
            function time() {
                clearTimeout(t); 
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); 
                var m = dt.getMinutes(); 
                var s = dt.getSeconds(); 
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000);  
            }

        </script>


    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 4.7rem">
                    <div class="alltitle">性别年龄图</div>
                    <div class="allnav" id="echart1"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.8rem">
                    <div class="alltitle">性别和年龄的环状图</div>
                    <div style="height:100%; width: 100%;">
                        <div class="sy" id="fb1"></div>
                        <div class="sy" id="fb2"></div>
                    </div>
                    <div class="boxfoot">

                    </div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter" id="amount">0</li>
                            <li class="pulll_left counter" id="Price">0</li>
                        </ul>
                    </div>
                    
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">成交货物件数</li>
                            <li class="pulll_left">成交总额</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="map"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height: 4.7rem">
                    <div class="alltitle">购物种类图</div>
                    <div class="allnav" id="echart5"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.8rem">
                    <div class="alltitle">性别和购物种类图</div>
                    <div class="allnav" id="echart6"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>

    <script type="text/javascript" src="js/world.js"></script>

 
</body>
</html>

get_Price.php

<?php
	$con=mysql_connect("localhost","root","root");
	if (!$con) 
	{ 
	    die('数据库连接失败'.$mysql_error()); 
	} 
	mysql_select_db("transaction",$con);
	$result = mysql_query("select sum(Price) from record where 1 =1;");
	$row = mysql_fetch_array($result);
	$Price = $row[0];
	echo $Price;
?>

show.js

/*
 * @Author: longyan
 * @Date:   2019-12-25 08:19:34
 * @Last Modified by:   longyan
 * @Last Modified time: 2019-12-30 10:57:05
 */

$(function() {
    refresh();

    //开始定时刷新
    setInterval(refresh,1000);
});

function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var colors = ['red', 'yellow', 'green', 'lightskyblue', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
    var myChart = echarts.init(document.getElementById('fb1'));
    var category = [];
    var data = [];
    $.get('../data/gender.json').done(function(result) {
        $.each(result, function(key, value) {
            category.push(key)
            data.push({ value: parseInt(value), name: key });
        });
        option = {
            title: [{
                text: '性别分布环形图',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) { //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '70%',
                itemWidth: 15,
                itemHeight: 15,
                data: category,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '15',
                }
            },
            series: [{
                name: '性别分布环形图',
                type: 'pie',
                avoidLabelOverlap: false,
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                color: colors,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: data,
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })
}

function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var colors = ['red', 'yellow', 'green', 'lightskyblue', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
    var myChart = echarts.init(document.getElementById('fb2'));
    var data = [];
    var category = [];
    $.get('../data/age.json').done(function(result) {
        $.each(result, function(key, value) {
            category.push(key);
            data.push({ value: parseInt(value), name: key });
        });
        option = {
            title: [{
                text: '年龄分布环形图',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) { //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '70%',
                itemWidth: 14,
                itemHeight: 14,
                data: category,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '14',
                }
            },
            series: [{
                name: '年龄分布环形图',
                type: 'pie',
                avoidLabelOverlap: false,
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                color: colors,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: data,
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })
}

function getArrayIndex(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return i;
        }
    }
    return -1;
}

function echarts_1() {
    var myChart = echarts.init(document.getElementById('echart1'));
    var colors = ['red', 'yellow', 'green', 'lightskyblue', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
    var source = [];
    var category = ["gender", "10-20", "20-30", "30-40", "40-50", "50-60", "60-100"];
    var female = ["female", 0, 0, 0, 0, 0, 0];
    var male = ["male", 0, 0, 0, 0, 0, 0];
    $.get('../data/gender_age.json').done(function(result) {
        $.each(result["female"], function(key, value) {
            female[getArrayIndex(category, key)] = parseInt(value);
        });
        $.each(result["male"], function(key, value) {　　　
            male[getArrayIndex(category, key)] = parseInt(value);
        });
        source.push(category);
        source.push(male);
        source.push(female);
        option = {
            legend: {
                // orient: 'vertical',
                // left: 'left',
                itemWidth: 15,
                itemHeight: 15,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            tooltip: {},
            dataset: {
                source: source
            },
            xAxis: [{
                type: 'category',
                gridIndex: 0,
                axisLabel: {
                    // rotate:50,
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        lineHeight: 20,
                        fontSize: 14
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
            }, {
                type: 'category',
                gridIndex: 1,
                axisLabel: {
                    // rotate:50,
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        lineHeight: 20,
                        fontSize: 14
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
            }, ],
            yAxis: [{
                gridIndex: 0,
                axisLabel: {
                    // rotate:50,
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        lineHeight: 20,
                        fontSize: 14
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
            }, {
                gridIndex: 1,
                axisLabel: {
                    // rotate:50,
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        lineHeight: 20,
                        fontSize: 14
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
            }],
            grid: [
                { bottom: '55%' },
                { top: '60%' }
            ],
            series: [
                // These series are in the first grid.
                { type: 'bar', seriesLayoutBy: 'row' },
                { type: 'bar', seriesLayoutBy: 'row' },
                // These series are in the second grid.
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })
}

function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'));
    var category = [];
    var data = [];
    var colors = ['red', 'yellow', 'green', 'lightskyblue', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
    $.get('../data/type.json').done(function(result) {
        $.each(result, function(key, value) {
            category.push(key);
        });
        $.each(result, function(key, value) {
            data.push({ value: parseInt(value), name: key });
        });
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            grid: {
                left: '0%',
                top: '50px',
                right: '0%',
                bottom: '20%',
                containLabel: true
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                itemWidth: 15,
                itemHeight: 15,
                data: category,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true,
                    },
                    dataView: {
                        show: true,
                        readOnly: false,
                        iconStyle: {
                            normal: {
                                borderColor: '#f60'
                            }
                        }
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],

                    },
                    restore: {
                        show: true,
                        iconStyle: {
                            normal: {
                                borderColor: 'yellow'
                            }
                        }
                    },
                    saveAsImage: {
                        show: true,
                        iconStyle: {
                            normal: {
                                borderColor: 'green'
                            }
                        }
                    }
                }
            },
            series: [{
                name: "购物类型",
                type: 'pie',
                center: ['64%', '60%'],
                radius: "50%",
                color: colors,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: data,
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })
}

function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart6'));
    var type=["gender","洗护","玩具","宠物","办公","汽车","百货","运动","动漫","其他","食品","学习","珠宝","家电","服装","影视","游戏","鞋靴","建材","数码"];
    var parallel = [{
            dim: 0,
            name: 'gender',
            type: 'category',
            data: ['male', 'female']
        }];
    var male=["male"];
    var female=["female"]
    var data = [];
    var colors = ['red', 'yellow', 'green', 'lightskyblue', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
    $.get('../data/gender_type.json').done(function(result) {
        for(var i=1;i<=type.length;i++){
            male.push(0);
            female.push(0);
            parallel.push({dim: i, name: type[i]});
        }
        $.each(result["female"], function(key, value) {
            female[getArrayIndex(type, key)] = parseInt(value);
        });
        $.each(result["male"], function(key, value) {
            male[getArrayIndex(type, key)] = parseInt(value);
        });
        data.push(male);
        data.push(female);
        option = {
            parallelAxis: parallel,
            parallel: {
                axisExpandable: true,
                axisExpandCenter: 15,
                axisExpandCount: 10,
                axisExpandWidth: 60,
                axisExpandTriggerOn: 'mousemove',

                z: 100,
                parallelAxisDefault: {
                    type: 'value',
                    nameLocation: 'start',
                    nameRotate: 25,
                    // nameLocation: 'end',
                    nameTextStyle: {
                        fontSize: 15
                    },
                    nameTruncate: {
                        maxWidth: 200
                    },
                    nameGap: 20,
                    splitNumber: 3,
                    tooltip: {
                        show: true
                    },
                    axisLine: {
                        // show: false,
                        lineStyle: {
                            width: 1,
                            color: 'rgba(255,255,255,.5)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    z: 100
                }
            },
            series: {
                type: 'parallel',
                smooth: true,
                lineStyle: {
                    width: 4
                },
                blendMode: 'lighter',
                data: data,
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })
}

function refresh() {
    world_map()
    echarts_31();
    echarts_32();
    echarts_1();
    echarts_5();
    echarts_6();
}

其余代码这里不再做具体展示

简单演示

下面就给大家简单演示一下整个项目运行起来之后的样子
首先还是将平台都启动，然后启动数据生成和数据处理的程序
最后，打开我们的网站即可
最开始，没有数据的时候是这样的
在这里插入图片描述
当实时处理程序将数据处理之后，会慢慢变成下面的样子
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目总结

一步一步，终于将这个模拟购物数据实时流处理的任务完成了，整个项目在技术方面用到了很多不同的技术，采用了很多不同的方法，这个既是优点，也是缺点，由于技术用的比较多，环境配置就相对比较麻烦，但是整体效果还是不错的，整体上达到预期目标。
如果阅读过程中有遇到什么问题，或者有写错的地方，欢迎大家批评指正。

# storm # php # java
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

大数据面试问答-数据湖

avatar 永洪数据分析社区
cover

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】4.4 异构数据源整合（CSV/JSON/Excel数据导入）

avatar 永洪数据分析社区
cover

Vue3携手Echarts，打造炫酷数据可视化大屏

avatar 永洪数据分析社区