项目介绍
本项目总体分为
- 平台搭建
- 模拟数据源生成
- 实时流数据处理
- 实时数据大屏
这几个部分，我将分成几个博客分别介绍这些部分的工作，本文主要介绍最后一个部分，实时数据大屏。
前面的几篇文章已经将平台的搭建，数据模拟生成，流数据处理部分做了详细的介绍，这篇文章主要是对前面所做的工作进行一个升华，关分析出数据不够直观，而能将所做的东西更加直观的表达出来就需要进行可视化了，下面我将为大家介绍可视化部分的工作
平台搭建，具体可以看平台搭建
模拟数据源生成，具体可以看模拟数据源生成
实时流数据处理，具体可以看实时流数据处理
项目下载地址下载
环境介绍
首先还是对环境介绍一下，这部分主要使用的将是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();
}
其余代码这里不再做具体展示
简单演示
下面就给大家简单演示一下整个项目运行起来之后的样子
首先还是将平台都启动，然后启动数据生成和数据处理的程序
最后，打开我们的网站即可
最开始，没有数据的时候是这样的
当实时处理程序将数据处理之后，会慢慢变成下面的样子
项目总结
一步一步，终于将这个模拟购物数据实时流处理的任务完成了，整个项目在技术方面用到了很多不同的技术，采用了很多不同的方法，这个既是优点，也是缺点，由于技术用的比较多，环境配置就相对比较麻烦，但是整体效果还是不错的，整体上达到预期目标。
如果阅读过程中有遇到什么问题，或者有写错的地方，欢迎大家批评指正。
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
