模擬購物數據實時流處理（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();
}

其餘代碼這裏不再做具體展示

簡單演示

下面就給大家簡單演示一下整個項目運行起來之後的樣子
首先還是將平臺都啓動，然後啓動數據生成和數據處理的程序
最後，打開我們的網站即可
最開始，沒有數據的時候是這樣的

當實時處理程序將數據處理之後，會慢慢變成下面的樣子

項目總結

一步一步，終於將這個模擬購物數據實時流處理的任務完成了，整個項目在技術方面用到了很多不同的技術，採用了很多不同的方法，這個既是優點，也是缺點，由於技術用的比較多，環境配置就相對比較麻煩，但是整體效果還是不錯的，整體上達到預期目標。
如果閱讀過程中有遇到什麼問題，或者有寫錯的地方，歡迎大家批評指正。

模擬購物數據實時流處理（4）——實時數據大屏

項目介紹

環境介紹

代碼部分

簡單演示

項目總結

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

RDD編程初級進階

模擬購物數據實時流處理（3）——實時流數據處理

模擬購物數據實時流處理（4）——實時數據大屏

RDD初級編程

Spark-SQL實驗

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結