200字范文，内容丰富有趣，生活中的好帮手！
200字范文XML网站地图
全站
首页 50字 100字 200字 300字 400字 500字 600字 700字 800字 900字 1000字 1200字 1500字
推荐专题：
200字范文 > 数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图 mysql筛选统计语句 时

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

时间：2024-03-02 16:40:28

相关推荐

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

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

一、前言二、项目介绍三、项目展示四、项目经验分享4.1 翻牌器4.1.1 翻牌器-今日实时交易4.1.2.翻牌器后端统计SUM函数的使用 4.2 不同时间指标的数据MySql内部的时间计算 4.3 实时交易播报MySql联表查询和内部遍历循环 4.4 每日交易量4.4.1.近30日交易量/交易额API4.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,-08-31$sql .= " AND date_format(a.paid_at,'%Y-%m') = date_format(CURDATE(),'%Y-%m')";break;case 3;//上月，修改 BY jieji007,-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;//今日标准时间; -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;//今日标准时间; -09-02} else {var now = nowYear + "-" + nowMonth + "-" + "01";//今日标准时间; -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";//今日标准时间; -09-02}if (today == "30") {var now = nowYear + "-" + nowMonth + "-" + mGetDate(Number(mons));//今日标准时间; -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筛选统计语句 时间计算 大数据量统计)

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法，并不表明网站立场。
相关阅读
基于Echarts+HTML5可视化数据大屏展示—设备环境监测平台大数据平台

基于Echarts+HTML5可视化数据大屏展示—设备环境监测平台大数据平台

2021-07-09

【ECharts系列|03可视化大屏】大数据管理平台实时展示

【ECharts系列|03可视化大屏】大数据管理平台实时展示

2021-06-06

基于Echarts+HTML5可视化数据大屏展示—北斗车联网大数据平台

基于Echarts+HTML5可视化数据大屏展示—北斗车联网大数据平台

2019-02-03

基于Echarts+HTML5可视化数据大屏展示—交通大数据分析平台

基于Echarts+HTML5可视化数据大屏展示—交通大数据分析平台

2023-06-03

扩展阅读

大数据分析平台的可视化数据探索趋势

数据可视化用数据讲故事的五个步骤

数据可视化用数据讲故事的五个步骤

数据可视化用数据讲故事的五个步骤

数据可视化用数据讲故事的五个步骤

数据可视化工作简历

最近发布
我的洗衣服日记：一个300字的洗衣新手的成长历程

我的洗衣服日记：一个300字的洗衣新手的成长历程

2024-08-09

【热门】三八妇女节的作文200字集合9篇

【热门】三八妇女节的作文200字集合9篇

2024-08-09

【热门】六一儿童节的作文200字汇编8篇

【热门】六一儿童节的作文200字汇编8篇

2024-08-09

学会感恩演讲稿200字

学会感恩演讲稿200字

2024-08-09

家务日记：生活中的点滴收获与感悟

家务日记：生活中的点滴收获与感悟

2024-08-08

生命的精彩旅程: 激励人心的18篇演讲稿

生命的精彩旅程: 激励人心的18篇演讲稿

2024-08-08

推荐专题
桃花日记200字 普通话演讲稿200字 新闻广播稿200字 炒鸡蛋日记200字 关于祖国的作文200字 我的母亲200字 墓志铭200字 推拿科个人总结200字 作文我的好朋友200字 我的家人日记200字 生物考试反思200字 写游记的作文200字 哪吒之魔童降世观后感200字 团员自我鉴定200字 晨跑日记200字
猜你喜欢：
关于科技的作文200字 三国小故事200字 西游记第四十九回概括200字 军训广播稿200字 我的朋友作文200字男生 社戏概括200字 毕业论文选题理由200字 值日作文200字 200个字的作文 新闻日记200字真实 校园美景200字 200字的反思 我的自传200字 200字作文写景 夕阳作文200字 我最高兴的一件事200字 爸爸妈妈我想对你说200字 写诗的作文200字 成语小故事200字左右 生源地助学贷款200字 学校生活日记200字 描写春雨的片段200字 我的爸爸周记200字 200字的广播稿 秋景描写片段200字 实训总结200字左右 观后感怎么写200字 英文美文200字左右 写景的一段话200字 蝴蝶的作文200字
展开

200字范文 免责声明© 2024 All Rights Reserved.

湘ICP备2024057051号网站地图XML

© 2024 All Rights Reserved.

200字范文 免责声明