模拟购物数据实时流处理（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();
}

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

简单演示

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

当实时处理程序将数据处理之后，会慢慢变成下面的样子

项目总结

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