数据可视化大屏电商数据展示平台

一、前言
二、项目介绍
三、项目展示
四、项目经验分享
- 4.1 翻牌器
- - 4.1.1 翻牌器-今日实时交易
  - 4.1.2.翻牌器后端统计SUM函数的使用
- 4.2 不同时间指标的数据
- - MySql内部的时间计算
- 4.3 实时交易播报
- - MySql联表查询和内部遍历循环
- 4.4 每日交易量
- - 4.4.1.近30日交易量/交易额API
  - 4.4.1.近30日交易量/交易额Echarts
- 4.5 24小时销售额/销售量折线图
- - 4.5.1.GROUP BY 条件
  - 4.5.2.近24小时/上24小时
- 4.6 筛选时间切换封装函数
- - 4.6.1.获取当天日期
  - 4.6.2.获取当月日期
  - 4.6.3.获取上月日期
  - 4.6.3.获取当前月份天数
总结

一、前言

作为地区销售部门，有很多指标需要跟踪。从收入或订单数量等高级指标，到客户反馈等更详细的信息，作为部门的领导，可能需要花费大量的时间从数据堆中找出每次需要的不同数据。客户的销售基本上都是通过线上或者手机端完成的，统一存储在Mysql数据库中。
作为数据可视化开发，客户的基本面已经完成了在数据收集、数据清洗和数据过滤。接下来的主要工作是数据筛选和统计、数据格式化输入即可。

二、项目介绍

项目是某奶品在华东区线下销售的数据统计平台，主要呈现每日奶品销售的信息数据。如销售总金额、区域销售排行、产品品类销售排行、24小时销售量和销售额、不同网点的销售趋势等等。

从需求上可以分析得出，大屏一是要满足数据展示类，二是要满足决策者实时操作比对不同时间节点的销售数据，和后端数据进行交互，三是实时数据，顾名思义指的就是数据在实时传输，产生了数据就要立即展示出来。

三、项目展示

四、项目经验分享

电商数据展示，主要的数据指标，昨日、今日、7日、30日、本月、上月等多维度环比的展示，这对mysql语句的熟练掌握和实际应用有很大的挑战。也正是该项目的顺利完成，让自己对mysql有了更深度的认识。

4.1 翻牌器

4.1.1 翻牌器-今日实时交易

作为当日交易总金额，是整个大屏最为关注的点睛之处。因此，采用了numberAnimate翻牌器效果，实时刷新数据，一目了解掌握大局。

4.1.2.翻牌器后端统计SUM函数的使用

使用数据表中的当天记录和mysql内置函数CURDATE()，进行条件筛选判断，date_format(a.paid_at,'%Y-%m-%d') = CURDATE()

  public function getToday(){$sql = "select SUM(a.should_paid) AS totalPays,a.uniacid,b.uniacid,b.dpopen from " . $db->table('orders') . " AS a, " . $db->table('set_basic') . " AS b where a.status <> '-128'";// AND a.status <> '-126'$sql .= " AND date_format(a.paid_at,'%Y-%m-%d') = CURDATE() AND a.uniacid = b.uniacid";$row = $db->queryall($sql);$res["data"] = $row;die(json_encode_lockdata($res));}

4.2 不同时间指标的数据

MySql内部的时间计算

不同的时间指标对应不同的计算方式，充分利用mysql内置函数进行计算。通过数据可视化大屏前端点击切换时间指标来动态获取具体的时间数据指标。

昨天：TO_DAYS(CURDATE()) - TO_DAYS(date_format(a.paid_at,'%Y-%m-%d')) = 1
今天： date_format(a.paid_at,'%Y-%m-%d') = CURDATE()；
近7天：DATE_SUB(CURDATE(), INTERVAL 6 DAY) <= date(a.paid_at)
本月：date_format(a.paid_at,'%Y-%m') = date_format(CURDATE(),'%Y-%m')
上月：date_format(a.paid_at,'%Y-%m') = date_format(DATE_SUB(CURDATE(), INTERVAL 1 MONTH),'%Y-%m')
近30天： DATE_SUB(CURDATE(), INTERVAL 29 DAY) <= date(a.paid_at)

  public function getOrders(){global $db, $res;dbc();/*间隔时间天数,-1昨天，0-当日;7-近7日；30-近30天;* 过滤$days,如果无参数，默认为当日* */@$CR_days = $_POST['days'];if ($CR_days == "") {$CR_days = "0";}$sql = "select COUNT(a.id) AS transTotal,SUM(a.should_paid) AS totalPays,a.paid_at,a.uniacid,b.uniacid,b.dpopen from " . $db->table('orders') . " AS a, " . $db->table('set_basic') . " AS b where a.status <> '-128' AND a.uniacid = b.uniacid";//AND a.status <> '-126'/*判断日期间隔*/switch ($CR_days) {case -1;$sql .= "  AND TO_DAYS(CURDATE()) - TO_DAYS(date_format(a.paid_at,'%Y-%m-%d')) = 1";break;case 0;$sql .= "  AND date_format(a.paid_at,'%Y-%m-%d') = CURDATE()";break;case 7;$sql .= "  AND DATE_SUB(CURDATE(), INTERVAL 6 DAY) <= date(a.paid_at)";break;case 2;//本月，修改 BY jieji007,2020-08-31$sql .= "  AND date_format(a.paid_at,'%Y-%m') = date_format(CURDATE(),'%Y-%m')";break;case 3;//上月，修改 BY jieji007,2020-08-31$sql .= "  AND date_format(a.paid_at,'%Y-%m') = date_format(DATE_SUB(CURDATE(), INTERVAL 1 MONTH),'%Y-%m')";break;case 30;$sql .= "  AND DATE_SUB(CURDATE(), INTERVAL 29 DAY) <= date(a.paid_at)";break;default:$sql .= "  AND date_format(a.paid_at,'%Y-%m-%d') = CURDATE()";}$row = $db->queryall($sql);$res["data"] = $row;die(json_encode_lockdata($res));}

4.3 实时交易播报

实时交易播报，开发难点在于需要多次跨表查询。

获取当日交易的站点及名称；
获取对应站点团长的数量；
获取对应站点团长的数量；
获取对应的站点会员数量；

联表查询后，再次循环不同的数据表，方便生成json数据，传送至前端。

MySql联表查询和内部遍历循环

public function getTransMaster(){global $db, $res;dbc();//获取当日交易的站点及名称;$sql = "select a.uniacid,SUM(a.should_paid) AS totalPays,COUNT(a.id) AS transTotal,MAX(a.paid_at) AS paid_at,b.uniacid,b.name,b.dpopen from " . $db->table('orders');$sql .= " AS a, " . $db->table('set_basic') . " AS b";$sql .= " WHERE date_format(a.paid_at,'%Y-%m-%d') = CURDATE() AND a.uniacid = b.uniacid AND b.dpopen = 1";$sql .= " GROUP BY a.uniacid ORDER BY totalPays DESC LIMIT 15";$row = $db->queryall($sql);//获取对应站点团长的数量;foreach ($row as $k => $v) {$sql_l = "select uniacid,IFNULL(COUNT(id),0) AS leaderTotal,server,legitimate,created_at from " . $db->table('leader');$sql_l .= " WHERE date_format(created_at,'%Y-%m-%d') = CURDATE() AND uniacid =" . $v['uniacid'];//server = 1 AND legitimate = 1 AND$sql_l .= " GROUP BY uniacid";$row[$k]["leaderTotal"] = $db->queryall($sql_l);}//获取对应的站点会员数量;foreach ($row as $k => $v) {$sql_m = "select COUNT(id) AS memberTotal,created_at,uniacid,legitimate from " . $db->table('member');$sql_m .= " WHERE legitimate = 1 AND date_format(created_at,'%Y-%m-%d') = CURDATE() AND uniacid =" . $v['uniacid'];$sql_m .= " GROUP BY uniacid";$row[$k]["memberTotal"] = $db->queryall($sql_m);}$res["data"] = $row;die(json_encode_lockdata($res));}

4.4 每日交易量

准确的表述，应该是近30日的交易量/交易额柱图。方便决策者迅速有效的发现每日销售数据的差异，快速做出反应，进行销售问题的反馈和解决。

4.4.1.近30日交易量/交易额API

为防止日统计无效，使用到了ifnull(COUNT(a.id),0) AS totalTrans函数；
日期格式化DATE_FORMAT(a.paid_at,'%Y-%m-%d')，便于Echarts的图表的展示；

   //近30日交易量;public function getEveryDay(){global $db, $res;dbc();$sql = "select DATE_FORMAT(a.paid_at,'%Y-%m-%d') as dataKey,ifnull(COUNT(a.id),0) AS totalTrans,ifnull(SUM(a.should_paid),0) AS totalPays,b.uniacid,b.dpopen from " . $db->table('orders') . " AS a, " . $db->table('set_basic') . " AS b WHERE a.status <> '-128' AND a.uniacid = b.uniacid";// AND a.status <> '-126'if (@$_COOKIE['Controller'] == "-1") {$sql .= "  AND a.uniacid = " . $_COOKIE['uniacid'];} else {$sql .= " AND b.dpopen = 1";}$sql .= " GROUP BY DATE_FORMAT(a.paid_at,'%Y-%m-%d') ORDER BY a.paid_at DESC LIMIT 30";$row = $db->queryall($sql);$res["data"] = $row;die(json_encode_lockdata($res));}

4.4.1.近30日交易量/交易额Echarts

//柱状图
function getBar(dataName, dataList1, dataList2) {var myChart = echarts.init(document.getElementById("trans"));var option = {tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#57617B'}}},dataZoom: [{show: false,start: 0,end: 50,type: "inside",}],legend: {data: [{"name": "交易量"},{"name": "交易额"}],top: '2%',icon: 'circle',textStyle: {"color": "rgba(255,255,255,0.9)"}},xAxis: [{"type": "category",data: dataName,axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},inverse: true,axisLabel: {textStyle: {color: "rgba(255,255,255,.6)", fontSize: '12'}}}],yAxis: [{type: "value",axisLabel: {show: true},axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},splitLine: {show: true, lineStyle: {color: "rgba(255,255,255,.2)"}}},{type: "value",show: true,axisLabel: {show: true},axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},splitLine: {show: true, lineStyle: {color: "rgba(255,255,255,0)"}}}],grid: {top: '13%',right: '2%',left: '2%',bottom: '5%',containLabel: true},series: [{name: "交易量",type: "bar",data: dataList1,barWidth: '50%',yAxisIndex: 1,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#39e7d7'}, {offset: 1,color: '#10A7DB'}], false),barBorderRadius: [2, 2, 0, 0],shadowColor: 'rgba(0,255,225,1)',shadowBlur: 4}}},{name: "交易额",type: 'line',smooth: true,symbol: 'circle',symbolSize: 5,//showSymbol: false,yAxisIndex: 0,data: dataList2,lineStyle: {normal: {width: 2},},itemStyle: {color: '#cdba00',borderColor: 'rgba(0,136,212,0.2)',borderWidth: 12}}]};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

4.5 24小时销售额/销售量折线图

4.5.1.GROUP BY 条件

筛选条件 TO_DAYS(CURDATE()) - TO_DAYS(date_format(a.paid_at,'%Y-%m-%d')) = 1
分组统计规则 GROUP BY DATE_FORMAT(a.paid_at,'%Y-%m-%d %H')

public function getTwentyFour(){global $db, $res;dbc();//最近24小时记录;$sql = "select RIGHT(DATE_FORMAT(a.paid_at,'%Y-%m-%d %H'),2) as dataKey,ifnull(COUNT(a.id),0) AS totalTrans,ifnull(SUM(a.should_paid),0) AS totalPays,b.uniacid,b.dpopen from " . $db->table('orders') . " AS a, " . $db->table('set_basic') . " AS b WHERE a.paid_at <> '' AND DATE_FORMAT(a.paid_at,'%Y-%m-%d') = CURDATE()";$sql .= " AND a.status <> '-128' AND a.uniacid = b.uniacid AND b.dpopen = 1";//AND a.status <> '-126'$sql .= " GROUP BY DATE_FORMAT(a.paid_at,'%Y-%m-%d %H')";$row = $db->queryall($sql);$res["data"] = $row;//上24小时记录;$sql_p = "select RIGHT(DATE_FORMAT(a.paid_at,'%Y-%m-%d %H'),2) as dataKey,ifnull(COUNT(a.id),0) AS totalTrans,ifnull(SUM(a.should_paid),0) AS totalPays,b.uniacid,b.dpopen from " . $db->table('orders') . " AS a, " . $db->table('set_basic') . " AS b WHERE a.paid_at <> '' AND TO_DAYS(CURDATE()) - TO_DAYS(date_format(a.paid_at,'%Y-%m-%d')) = 1";$sql_p .= " GROUP BY DATE_FORMAT(a.paid_at,'%Y-%m-%d %H')";$row_p = $db->queryall($sql_p);$res["pdata"] = $row_p;die(json_encode_lockdata($res));}

4.5.2.近24小时/上24小时

//折线图
function getLine(dataName, dataList1, dataList2) {var myChart = echarts.init(document.getElementById('twentyFour'));var option = {tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#57617B'}}},legend: {data: ['近24小时', '上24小时'],y: 'top',textStyle: {color: "#fff"},itemGap: 20,},grid: {top: '15%',right: '2%',left: '2%',bottom: '5%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,interval: 0,axisLabel: {show: true,textStyle: {color: 'rgba(255,255,255,.6)'}},axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},data: dataName}],yAxis: [{axisLabel: {show: true,textStyle: {color: 'rgba(255,255,255,.6)'}},axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},splitLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}}}],series: [{name: '近24小时',type: 'line',connectNulls: true,smooth: true,symbol: 'circle',symbolSize: 3,showSymbol: true,lineStyle: {normal: {width: 2}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(24, 163, 64, 0.3)'}, {offset: 0.8,color: 'rgba(24, 163, 64, 0)'}], false),shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10}},itemStyle: {normal: {color: '#cdba00',borderColor: 'rgba(137,189,2,0.27)',borderWidth: 12}},data: dataList1}, {name: '上24小时',type: 'line',connectNulls: true,smooth: true,symbol: 'circle',symbolSize: 3,showSymbol: true,lineStyle: {normal: {width: 2}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(39, 122,206, 0.3)'}, {offset: 0.8,color: 'rgba(39, 122,206, 0)'}], false),shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10}},itemStyle: {normal: {color: '#277ace',borderColor: 'rgba(0,136,212,0.2)',borderWidth: 12}},data: dataList2}]};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

4.6 筛选时间切换封装函数

4.6.1.获取当天日期

function getDate(days) {//定义今日标准时间;var d = new Date();var nowYear = d.getFullYear().toString();//今年var nowMonth = timeAdd0((d.getMonth() + 1).toString());//当月var nowDay = timeAdd0(d.getDate().toString());//当日var now = nowYear + "-" + nowMonth + "-" + nowDay;//今日标准时间; 2020-09-02//日期计算;var startDate = new Date(Date.parse(now.replace(/-/g, '/'))); //将开始时间由字符串格式转换为日期格式var value = startDate.getTime();  //将开始时间转为毫秒value += days * (24 * 3600 * 1000); //将天数转换成毫秒后与开始时间相加得到结束时间的毫秒数var d2 = new Date(value);    //将得到的毫秒数转换为日期var nowYear2 = d2.getFullYear().toString();//今年var nowMonth2 = timeAdd0((d2.getMonth() + 1).toString());//当月var nowDay2 = timeAdd0(d2.getDate().toString());//当日var endDate = nowYear2 + "-" + nowMonth2 + "-" + nowDay2;return endDate;
}

4.6.2.获取当月日期

//获取当月;
function getMonths(mons, today) {var d = new Date();var nowYear = d.getFullYear().toString();//今年var nowMonth = timeAdd0((d.getMonth() + 1 + Number(mons)).toString());//当月var nowDay = timeAdd0(d.getDate().toString());//当日if (today == "0") {var now = nowYear + "-" + nowMonth + "-" + nowDay;//今日标准时间; 2020-09-02} else {var now = nowYear + "-" + nowMonth + "-" + "01";//今日标准时间; 2020-09-02}return now;
}

4.6.3.获取上月日期

//获取上月;
function getLastMonths(mons, today) {var d = new Date();var nowYear = d.getFullYear().toString();//今年var nowMonth = timeAdd0((d.getMonth() + 1 + Number(mons)).toString());//当月if (today == "1") {var now = nowYear + "-" + nowMonth + "-" + "01";//今日标准时间; 2020-09-02}if (today == "30") {var now = nowYear + "-" + nowMonth + "-" + mGetDate(Number(mons));//今日标准时间; 2020-09-02}return now;
}

4.6.3.获取当前月份天数


//获取当前月份天数:
function mGetDate(mons) {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1 + Number(mons);var d = new Date(year, month, 0);return d.getDate();
}

总结

该项目是初期入门数据可视化大屏的作品，严格意义上，是在懵懂的状态下完成的开发。随时开发作品的不断增加，对项目销售的了解、开发过程的深入、大数据量的学习，回头再看，总有些可以精进的地方。

@漏刻有时

数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)相关推荐

大数据实战项目之电商数仓（一）
大数据实战项目之电商数仓(一) 项目介绍数据仓库概念数据仓库是为企业所有决策制定过程,提供所有系统数据支持的战略集合.通过对数据仓库中数据的分析,可以帮助企业改进业务流程,控制成本,提高产品质 ...
可视化大屏拖拉拽---低代码平台FlyFish
可视化大屏 + 拖拉拽 == 低代码平台一.低代码平台是什么? 低代码开发平台通过少量代码就可以快速生成应用程序的开发平台,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序: 二.低代码与零代 ...
springboot毕设项目基于数据可视化的云山川景点日推交流平台gox2x（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目基于数据可视化的云山川景点日推交流平台gox2x(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
web大屏展示用到的组件_可视化大屏如何实现？怎样对接开发？看这就对了！
前言关于可视化大屏,好多人看到好多炫酷的大屏,视觉效果都非常棒,但是具体实现起来大家就充满了疑惑,今天就来聊一聊可视化大屏的具体实现方法.欢迎大家沟通交流. 大屏常见的实现方式 WEB 项目中最常用 ...
大屏监控系统实战（6）-爬虫初探：爬取CSDN博客之星年度总评选投票统计数据
一.介绍我们先来做个简单的,我们的目标是爬取CSDN博客之星年度总评选的首页信息. 首页的地址:http://m234140.nofollow.ax.mvote.cn/wxvote/43ced329 ...
九大数据可视化利器，你有足球竞猜平台源码下载在使用吗？
可视化信息以易足球竞猜平台源码下载dsluntan.com Q3393756370足球竞猜平台源码下载于阅读的视觉化内容正在被越来越多的人所青睐.可视化形式呈现信息的需求也随之增加,因此近年来涌现出 ...
部门年终总结大屏太难做？FVS开发模式用起来，附年终报告模板
年底将至,又到了打工人逃不过的年终汇报环节-要准备年终汇报的时候了.如何通过年终汇报来让领导认可你一年的工作成果?汇报内容多,该如何全面地展示出来? 帆软君推荐大家使用FineReport的最新功能- ...

数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)