售货机大数据大屏可视化设计

已于 2023-12-23 21:19:19 修改
阅读量972 收藏 22
点赞数 4
分类专栏： HTML 文章标签： css html javascript
于 2023-06-09 23:51:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63471474/article/details/131078292
版权

目录

简介

速成版

代码版

css层叠样式

 数据文件

 不同地点售货机库存数量和缺货数量

 不同地点售货机销售数据

 不同类型的商品库存数量

不同区域的各指标数据

 不同区域的各指标数据

 不同支付方式用户人数

近5日新增和流失用户数据

商品库存数量和销售数量

商品销量数量和价格数据

商品销售金额前5名

商品销售数量前10

商品滞销数据

售货机销售金额及其环比增长率

 无人售货机各特征数据

销售金额实际值与预测值

用户分群数据

用户购买的商品名称和商品数量数据

用户消费地点数据

用户消费时段数据

库存分析

销售分析

总数据

用户分析

简介

这个售货机大数据大屏可视化项目使用了前端技术（JavaScript）来展示总数据、销售分析、库存分析和用户分析的信息。在总数据部分，可以查看销售金额、订单量、销售金额变化趋势、商品销售金额排名前5的商品，以及售货机销售情况和用户支付方式占比等重要数据。销售分析部分提供了销售金额的预测值与实际值对比，商品价格区间，销售数量排名前10的商品，以及客单价等信息。库存分析则展示了品类库存占比，存销量，滞销商品以及商品存货周转天数等内容。最后，用户分析部分包括近5天的用户新增和流失趋势，用户分群，用户画像以及用户消费时段等信息。这个项目可以帮助你全面了解售货机的销售情况、库存状况和用户行为，为决策提供数据支持。

速成版

点击上方“立即下载”，解压后用VScode打开user.html文件即可。如果出现下载不了等问题，请移步至1a2b3cEnter/Vending-machine-design (github.com)进行下载。

代码版

css层叠样式

@charset "utf-8";
/* CSS Document */
html,body,div,h1,h2,h3,h4,h5,h6,pre,a,li,ul{margin:0;padding:0}
body{font:normal normal normal 14px/24px Arial,"微软雅黑",Microsoft YaHei,simsun;text-align:center;word-break:break-all;background:#fff;min-width:1024px;overflow:hidden}
a{text-decoration:none;color:#333}
a:hover{color:#333}
a:active{outline:none}
li{list-style-type:none}
ul,li{list-style:none}
div{text-align:left}
.fr{float:right}
.h55{height:55%!important}
.h45{height:45%!important}

/*栅格化*/
.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;display:inline-block;zoom:1}
.pure-g [class*=pure-u]{font-family:sans-serif}
.pure-u-1-24{width:4.1667%}
.pure-u-1-12,.pure-u-2-24{width:8.3333%}
.pure-u-1-8,.pure-u-3-24{width:12.5%}
.pure-u-1-6,.pure-u-4-24{width:16.6667%}
.pure-u-1-5{width:20%}
.pure-u-5-24{width:20.8333%}
.pure-u-1-4,.pure-u-6-24{width:25%}
.pure-u-7-24{width:29.1667%}
.pure-u-1-3,.pure-u-8-24{width:33.3333%}
.pure-u-3-8,.pure-u-9-24{width:37.5%}
.pure-u-2-5{width:40%}
.pure-u-10-24,.pure-u-5-12{width:41.6667%}
.pure-u-11-24{width:45.8333%}
.pure-u-1-2,.pure-u-12-24{width:50%}
.pure-u-13-24{width:54.1667%}
.pure-u-14-24,.pure-u-7-12{width:58.3333%}
.pure-u-3-5{width:60%}
.pure-u-15-24,.pure-u-5-8{width:62.5%}
.pure-u-16-24,.pure-u-2-3{width:66.6667%}
.pure-u-17-24{width:70.8333%}
.pure-u-18-24,.pure-u-3-4{width:75%}
.pure-u-19-24{width:79.1667%}
.pure-u-4-5{width:80%}
.pure-u-20-24,.pure-u-5-6{width:83.3333%}
.pure-u-21-24,.pure-u-7-8{width:87.5%}
.pure-u-11-12,.pure-u-22-24{width:91.6667%}
.pure-u-23-24{width:95.8333%}
.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}

/*主体框架*/
html,body{width:100%;height:100%;color:#333}
.warp{margin:0 auto;width:100%}.w100p{width:100%}

/*头部*/
.header{height:56px;position:relative;overflow:hidden;text-align:center}
.sysName{display:inline-block;height:56px;width:382px;left:calc(50% - 191px);color:#007fff;position:fixed;border-bottom:1px solid #333}
.sysName:before,.sysName:after{content:"";position:absolute;border-top:58px solid transparent;border-left:25px solid #333;top:-1px;left:0;}
.sysName:after{border-left-color:#fff;left:-1px;top:-1px;}
.sysName .tit{display:block;height:100%;width:100%;text-align:center;line-height:56px;color:#333;font-size:22px}
.sysName .tit:before,.sysName .tit:after{content:"";position:absolute;border-top:58px solid transparent;border-right:25px solid #333;top:-1px;right:0;}
.sysName .tit:after{border-right-color:#fff;right:-1px;top:-1px;}

/*菜单*/
.menu{height:100%;margin:0 auto;display:inline-block}
.menu li{float:left;height:100%;height:56px;line-height:56px;font-size:15px;position:relative}
.menu li:before,.menu li:after{content:"";border-bottom:32px solid #ccc;position:absolute;top:18px;left:5px;border-right:15px solid transparent}
.menu li:after{border-bottom-color:#fff;left:4px;top:19px}
.menu li a{display:block;height:32px;margin:17px 4px 0;width:115px;text-align:center;font-size:13px;line-height:34px;overflow:hidden;color:#999;border:1px solid #ccc;font-weight:700}
.menu li a:before,.menu li a:after{content:"";border-top:32px solid #ccc;position:absolute;top:18px;right:5px;border-left:15px solid transparent}
.menu li a:after{border-top-color:#fff;right:4px;top:17px}
.menu li:nth-child(n+3):before,.menu li:nth-child(n+3):after{
	border-top:32px solid #ccc;position:absolute;top:18px;left:5px;border-right:15px solid transparent;border-bottom:0}
.menu li:nth-child(n+3):after{border-top-color:#fff;left:4px;top:17px}
.menu li:nth-child(n+3) a:before,.menu li:nth-child(n+3) a:after{border-bottom:32px solid #ccc;position:absolute;top:18px;right:5px;border-left:15px solid transparent;border-top:0;}
.menu li:nth-child(n+3) a:after{border-bottom-color:#fff;right:4px;top:19px}
.menu li.sysnameN{width:382px}
.menu li.sysnameN:before,.menu li.sysnameN:after{display:none}
.menu li a:hover{color:#333}
.menu li.on a{background-color:#ddd;color:#333}

/**/
.chartWarp{padding:25px 0 10px;height:calc(100% - 91px)}

.toal-row1{height:30%}
.toal-row1 .chartBlock{height:calc(100% - 53px);position:relative}
.toal-row1 .chartBlock .chartDiv{position:absolute!important;top:30%;left:0}
.toal-row2{height:calc(40% - 15px);margin-bottom: 15px;}
.toal-row3{height:30%}

.saleWarp .sale-row1{height:38%}
.saleWarp .sale-row2{height:62%}
.saleWarp .sale-row2 .tSel{height:calc(100% - 50px);margin-top: 20px;}

.inventoryWarp .int-row1{height:100%}
.int-row1 .h55{height:calc(55% - 20px)!important;margin-bottom:20px}
.int-row1 .tSel{height:calc(55% - 70px)!important;margin-top:20px}

.userWarp .user-row1{height:67%}
.userWarp .user-row2{height:33%}
.userWarp .user-row1 .col2 .chartBlock{height:calc(50% - 10px);margin-bottom:20px}
.userWarp .user-row1 .col2 .chartBlock:last-child{margin-bottom:0}

.pure-g [class*="pure-u-"],.pure-g [class^=pure-u-]{box-sizing:border-box;height:100%;padding:10px 10px}
.chartDiv{position:relative;z-index:10;width:100%;height:100%;display:block}

/**/
.chartBlock{width:100%;height:100%;position:relative}
.chartBlock .hd{height:32px;width:100%;text-align:center;position:absolute;top:-15px;z-index:1}
.chartBlock .hd .chartTit{display:inline-flex;background:#fff;}
.chartTit{display:inline-block;height:32px;line-height:32px;width:60%;padding:0 15px;position:relative;margin:0 auto}
.chartTit:after,.chartTit:before{content:"";position:absolute;left:-1px;border-right:16px solid #ccc;border-top:16px solid transparent;border-bottom:16px solid transparent;top:0px}
.chartTit:after{border-width:15px;border-right-color:#f5f5f5;left:0px;top:1px}
.chartTit .titContent{font-weight:700;height:30px;font-size:13px;display:block;color:#333;text-align:center;width:100%;min-width:8em;white-space:nowrap;border:1px solid #ccc;border-width:1px 0;background-color:#f5f5f5}
.chartTit .titContent:after,.chartTit .titContent:before{content:"";position:absolute;right:-1px;border-left:16px solid #ccc;border-top:16px solid transparent;border-bottom:16px solid transparent;top:0px}
.chartTit .titContent:after{border-width:15px;border-left-color:#f5f5f5;right:0px;top:1px}
.chartBlock .bd{border:1px solid #ccc;height:calc(100% - 32px);position:relative;width:calc(100% - 32px);padding:15px}

.subBlock{position:relative;border:1px solid #ccc;border-top:0}
.subBlock .subCon{height:32px;line-height:32px}
.subBlock .subtxt{float:left;margin-left:10px;height:32px;font-size:12px;color:#333}
.subBlock .subNum{font-weight:bold;font-size:15px;float:right;margin-right:10px}

.toal-row1 .pure-u-1-5:nth-child(1) .subBlock .subNum{color:#1779d9}
.toal-row1 .pure-u-1-5:nth-child(2) .subBlock .subNum{color:#30b761}
.toal-row1 .pure-u-1-5:nth-child(3) .subBlock .subNum{color:#d04a4b}
.toal-row1 .pure-u-1-5:nth-child(4) .subBlock .subNum{color:#ca841e}
.toal-row1 .pure-u-1-5:nth-child(5) .subBlock .subNum{color:#00a7c2}

 数据文件

 不同地点售货机库存数量和缺货数量

{
"类型":["库存总量","缺货总量","预警线"],
"地点":["教学楼","食堂","体育馆","田径场","操场"],
"库存数量":[195,150,120,110,212],
"缺货数量":[80,170,250,50,100]
}

 不同地点售货机销售数据

{
"地点":["教学楼","食堂","体育馆","田径场","操场"],
"销售金额":[228, 199, 207, 437, 570],
"订单量":[160, 50, 100, 180, 200],
"毛利润":[245, 359, 50, 100, 260]
}

 不同类型的商品库存数量

{
"data":[
{"value":760, "name":"流失用户"},
{"value":234, "name":"忠诚用户"},
{"value":800, "name":"潜力用户"},
{"value":800, "name":"一般用户"}
]
}

不同区域的各指标数据

{
"data":[
{"value":760, "name":"流失用户"},
{"value":234, "name":"忠诚用户"},
{"value":800, "name":"潜力用户"},
{"value":800, "name":"一般用户"}
]
}

 不同区域的各指标数据

{
"where":["教学楼","食堂","体育馆","田径场","操场"],
"sale":[
{"value":283122, "name":"教学楼"},
{"value":253597, "name":"食堂"},
{"value":299874, "name":"体育馆"},
{"value":260256, "name":"田径场"},
{"value":186585, "name":"操场"}],

"order":[
{"value":9097, "name":"教学楼"},
{"value":5597, "name":"食堂"},
{"value":8608, "name":"体育馆"},
{"value":7602, "name":"田径场"},
{"value":4865, "name":"操场"}],
	
"gross":[
{"value":146805, "name":"教学楼"},
{"value":104936, "name":"食堂"},
{"value":157321, "name":"体育馆"},
{"value":160256, "name":"田径场"},
{"value":186585, "name":"操场"}],

"unit":[
{"value":12.07, "name":"教学楼"},
{"value":9.13, "name":"食堂"},
{"value":11.03, "name":"体育馆"},
{"value":14.8, "name":"田径场"},
{"value":12.6, "name":"操场"}]
}

 不同支付方式用户人数

{
"data" : [   
{"name":"沙琪玛" ,"value":9},
{"name":"香芋面包" ,"value":9},
{"name":"井水豆腐香辣味" ,"value":9},
{"name":"卫龙大面筋" ,"value":6},
{"name":"蒙牛纯牛奶" ,"value":7},    
{"name":"旺旺牛奶" ,"value":3},
{"name":"安慕希" ,"value":3},
{"name":"小鱼仔" ,"value":2},
{"name":"营养快线" ,"value":4},
{"name":"王老吉" ,"value":7}			
	]
}

近5日新增和流失用户数据

{
"类型":["新增人数","流失人数"],
"日期":["9月1日","9月2日","9月3日","9月4日","9月5日"],
"新增人数":[5, 25, 20, 22, 12],
"流失人数":[3, 11, 13, 4, 8]
}

商品库存数量和销售数量

{
"数量类型":["销售数量","库存数量"],
"商品名称":["营养快线","香芋面包","沙琪玛","井水豆腐香辣味","小鱼仔","王老吉","旺旺牛奶","安慕希","蒙牛纯牛奶","卫龙大面筋","老坛酸菜面","QQ糖","酸枣糕"],
"库存数量":[120,85,95,98,100,105,105,110,110,109,68,52,51],
"销售数量":[144,148,165,167,168,170,175,180,190,195,205,215,230]
}

商品销量数量和价格数据

{
	"data": [
		{"value":[6.5 ,8],"name":"安慕希"},
		{"value":[1.8 ,13],"name":"井水豆腐香辣味"},
		{"value":[3.5 ,13.5],"name":"蒙牛纯牛奶"},
		{"value":[2.6 ,9],"name":"沙琪玛"},
		{"value":[3.8 ,14],"name":"王老吉"},
		{"value":[1.5 ,22],"name":"小鱼仔"},
		{"value":[4.5 ,10.5],"name":"优酸乳"},
		{"value":[5.5 ,18],"name":"咖啡"},
		{"value":[4.8 ,16],"name":"可口可乐"}
	]
}

商品销售金额前5名

{
"商品名称":["营养快线","卫龙大面筋","香芋面包","沙琪玛","井水豆腐香辣味"],
"销售金额":[199, 207, 228, 437 ,570]
}

商品销售数量前10

{
"商品名称":["营养快线","香芋面包","卫龙大面筋","沙琪玛","井水豆腐香辣味","小鱼仔","王老吉","旺旺牛奶","安慕希","蒙牛纯牛奶"],
"销售数量":[3, 5, 6, 9, 9,10 ,13 ,13 ,16 ,21]
}

商品滞销数据

{
"name":["滞销金额","库存数量","存货周转率"],
"商品名称":["沙琪玛","卫龙大面筋","香芋面包","营养快线","小鱼仔","旺旺牛奶","安慕希","蒙牛纯牛奶"],
"滞销金额":[310,90,80,270,130,450,305,90],
"库存数量":[90,45,42,90,40,95,90,88],
"存货周转率":[0.85,0.7,0.6,0.49,0.18,0.45,0.42,0.38]
}

售货机销售金额及其环比增长率

{
"日期":["2019-09-01","2019-09-02","2019-09-03","2019-09-04","2019-09-05","2019-09-06","2019-09-07","2019-09-08","2019-09-09","2019-09-10","2019-09-11","2019-09-12","2019-09-13","2019-09-14","2019-09-15","2019-09-16","2019-09-17","2019-09-18","2019-09-19","2019-09-20","2019-09-21","2019-09-22","2019-09-23","2019-09-24","2019-09-25","2019-09-26","2019-09-27","2019-09-28","2019-09-29","2019-09-30"],
"销售金额":[12837.00, 10000.00, 9326, 13882, 9150, 8800, 13500, 11000, 7200, 7800, 9000, 3850, 5450, 8130, 7815, 9534, 11205, 13680, 7680, 9915, 7849, 14568, 11689, 8653, 9956, 12320, 9865, 8652, 9005, 11950],
"销售金额环比增长率":[0, -0.2, -0.1, 0.49, -0.29, 0, 0.2, 0.35, -0.36, 0.33, 0.35, -0.2, -0.35, 0.24, 0.08, 0.29, -0.19, -0.15, 0, -0.1, 0.31, 0.31, -0.36, -0.18, 0, 0.75, 0.5, -0.2, 0.15, 0.5]
}

 无人售货机各特征数据

{
	"销售金额": [651400, 325700, 218590],
	"订单量": [18000, 8777, 790],
	"毛利润": [186000, 93096, 25505],
	"折扣额": [10857, 1059, 354],
	"客单价": [21, 10, 6]
}

销售金额实际值与预测值

{
	"D":["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日"],
	"T":[1.2, 1.4, 1.3, 1.1, 1.2, 0.8, 1.2, 1.1, 1.4, 1.7, 1.3,1.2, 1.4, 1.5, 1.1, 1.2, 0.9, 1.2, 1.1, 1.4, 1.5, 1.3],
	"Y":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
}

用户分群数据

{
"data":[
{ "value" : [40, 30, 20, 40, 40], "name" : "忠诚用户" },
{ "value" : [58, 20, 44, 70, 60], "name" : "潜力用户" },
{ "value" : [70, 40, 40, 60, 50], "name" : "一般用户" },
{ "value" : [8, 9, 10, 7, 8], "name" : "流失用户" }
]
}

用户购买的商品名称和商品数量数据

{
	"data": [
		{"value":22199,"name":"安慕希"},
		{"value":10288,"name":"井水豆腐香辣味"},
		{"value":274470,"name":"蒙牛纯牛奶"},
		{"value":12311,"name":"王老吉"},
		{"value":4885,"name":"小鱼仔"},
		{"value":32294,"name":"可口可乐"},
		{"value":18574,"name":"咖啡"},
		{"value":38929,"name":"旺仔牛奶"},
		{"value":969,"name":"豆腐干"},
		{"value":37517,"name":"燕麦饼干"},
		{"value":12053,"name":"QQ糖"},
		{"value":57299,"name":"方便面"},
		{"value":15418,"name":"碎碎冰"},
		{"value":22905,"name":"矿泉水"},
		{"value":5146,"name":"怪味豆"}
	]
}

用户消费地点数据

{
"消费地点":["教学楼","食堂","体育馆","田径场","操场"],
"用户人数":[35, 25, 9, 21, 18]
}

用户消费时段数据

{
"消费时段":["早上","上午","中午","下午","晚上"],
"用户人数":[3, 22, 24, 28, 11]
}

库存分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li class="on"><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp inventoryWarp">

  <div class="pure-g int-row1"> 
    <!-- 存销量 -->
    <div class="pure-u-1-3">
      <!-- 设备容量 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">设备容量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="mVolume" class="chartDiv"></div>
        </div>
      </div>
      <!-- 品类库存占比 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">品类库存占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="categoryStock" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">存销量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="stockSales" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3"> 
      <!-- 商品存货周转天数 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品存货周转天数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="turnaround" class="chartDiv"></div>
        </div>
      </div>
      <!-- 滞销商品 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">滞销商品</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unsalable" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.int.js"></script>
</html>

销售分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li class="on"><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp saleWarp">
  <div class="pure-g sale-row1">
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleM_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">订单量（个）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="orderQ_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">毛利润（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="grossM_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">客单价（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unitP_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>


  <div class="pure-g sale-row2">
    <div class="pure-u-1-4">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额预测值与实际值</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleAll" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-2">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品价格区间</h2>
          </div>
        </div>
        <div class="bd">
          <div id="priceRange" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品销售数量前10名</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleMtop10" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.sale.js"></script> 
</html>

总数据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li class="on"><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp toalWarp">
  <div class="pure-g toal-row1"> 
    <!-- 销售金额（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">销售金额环比增长率</div>
          <div class="subNum">-1.4%</div>
        </div>
      </div>
    </div>
    <!-- 订单量（个）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">订单量（个）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="orderQ" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">订单量环比增长率</div>
          <div class="subNum">11.1%</div>
        </div>
      </div>
    </div>
    <!-- 毛利（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">毛利润（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="grossM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">毛利润环比增长率</div>
          <div class="subNum">3.6%</div>
        </div>
      </div>
    </div>
    <!-- 售货机数量（台）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机数量（台）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="discount" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">售货机数量环比增长率</div>
          <div class="subNum">2.99%</div>
        </div>
      </div>
    </div>
    <!-- 购买用户数（人）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">购买用户数（人）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unitP" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">购买用户数环比增长率</div>
          <div class="subNum">1.77%</div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row2">
    <div class="pure-u-1-1">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额变化趋势</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleRate" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row3">
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品销售金额前5名</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleMtop5" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机销售情况</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleOrder" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户支付方式占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="payWay" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.total.js"></script>
</html>

用户分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li class="on"><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp userWarp">

  <div class="pure-g user-row1">
    <div class="pure-u-7-24 col2">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">近5天用户人数新增和流失趋势</h2>
          </div>
        </div>
        <div class="bd">
          <div id="lossGrowth" class="chartDiv"></div>
        </div>
      </div>
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户类型人数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="cSorNum" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-10-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户分群</h2>
          </div>
        </div>
        <div class="bd">
          <div id="userGroup" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-7-24 col2">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品价格区间</h2>
          </div>
        </div>
        <div class="bd">
          <div id="pInterval" class="chartDiv"></div>
        </div>
      </div>
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户消费地点</h2>
          </div>
        </div>
        <div class="bd">
          <div id="expLoc" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g user-row2">
<!--
    <div class="pure-u-7-24">
      
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">会员与非会员人数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="vipC" class="chartDiv"></div>
        </div>
      </div>
     
    </div>
 -->
    <div class="pure-u-12-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户消费时段</h2>
          </div>
        </div>
        <div class="bd">
          <div id="expTime" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-12-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户画像</h2>
          </div>
        </div>
        <div class="bd">
          <div id="userHot" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.user.js"></script>
<!-- <script language="javascript" type="text/javascript" src="js/lossgrowth.js"></script> -->
</html>

白日梦想家☜
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts可视化数据展示大屏.rar
10-19
使用Echarts做的大数据展示大屏，所有样式设计在CSS中，有需要的可以看看，全部板块设计可进行二次开发。
可视化管理_仓库管理可视化之四
weixin_39924481的博客
12-09 804
一、仓库管理可视化： ①仓库管理可视化分为：库存货品可视化、库位动态可视化、作业设备可视化、物料供给可视化、仓库作业可视化、人员情况可视化等六个方面；今天小编来分享下库存货品可视化，看看它都有哪些因素组成吧！▲仓库管理可视化 ②物料供给可视化分为：物料现有库存和物料每日消耗，那就跟随小编来看看它的组成吧！▲物料供给可视化二、物料可视化之物料现有库存： ① 物料现有库存就是对仓内的物料进行盘点确认，...
Echarts——售货机大数据分析平台
最新发布
2401_83176974的博客
05-17 1260
整体文件。
基于Echarts实现可视化数据大屏机械大数据大屏页面模板
HTML网页设计
08-17 1291
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ......
Echarts总结之无人售货机
2301_81685623的博客
05-13 911
一，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。一，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。二，可视化使用到的数据表。
售货机大数据分析平台.rar
10-28
售货机大数据分析平台.rar
基于Python的自动售货机销售数据可视化分析及预测
毕业作品网站
07-10 7114
销量前五的商品销量柱状图:先将时间转换为标准格式，再讲时间列换位到索引上，用户输入要绘制那一月的销量柱状图，通过循环遍历得到次月商品名单，创建等长零列表，两列表压缩成字典，依次更新字典中商品销量，根据销量对字典进行排序，获取用户画前几的柱状图，绘图。......
Python数据挖掘项目实战——自动售货机销售数据可视化分析
2301_79336341的博客
01-01 1366
近年来，随着我国经济技术的不断提升，自动化机械在人们日常生活中扮演着越来越重要的角色，更多的被应用在不同的领域。而作为新的一种自动化零售业态，自动售货机在日常生活中应用越来越广泛。自动售货机销售产业在走向信息化、合理化同时，也面临着高度同质化、成本上升、毛利下降等诸多困难与问题，这也是大多数企业所会面临到的问题。为了提高市场占有率和企业的竞争力，某企业在广东省某8个市部署了376台自动售货机，但经过一段时间后，发现其经营状况并不理想。
基于Echarts实现大屏数据可视化物虚拟数据统计
热门推荐
HTML网页设计
08-15 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
【大数据可视化大屏源码】销售数据可视化页面设计.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据...
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码+笔记
04-23
一套课程让你精通Echarts技术栈，让大数据可视化开发丝般顺滑！ 标题：Echarts+Vue3.0 大数据可视化项目构建 Echarts+Vue3.0 大数据可视化项目源码 1、可视化面板布局适配屏幕 2、利用ECharts 实现柱状图展示 ...
大数据可视化 结课项目*无人售货机
05-13
【大数据可视化 结课项目*无人售货机】项目主要运用了大数据可视化技术，结合Echarts这一流行的JavaScript数据可视化库，来实现对无人售货机运营数据的深度分析和直观展示。这个项目旨在帮助理解大数据在现代商业...
【Python数据分析与可视化】pyecharts数据可视化（实训六）
风口IT猪的成长录
12-06 2855
pyecharts数据可视化（实训六）示例代码 示例代码 from pyecharts import options as opts from pyecharts.globals import ThemeType import numpy as np %matplotlib inline from pyecharts.charts import Bar # x轴数据 items = ["相机", "短视频", "视频", "浏览器", "商城", "购票", "小说", "聊天", "小工具", "理财
应用实战：无人售货机零售项目ECharts展现
2301_77281478的博客
05-13 1403
2.可视化展示销售情况总分析了解无人售货机零售项目背景可视化使用到的数据表如表所示。2.可视化展示销售情况总分析。
无人售货机
weixin_52954183的博客
04-14 639
* * 案例：无人售货机 * 有橙汁和啤酒两种饮品，每种饮品价值5毛钱，现在用户可以通过一块钱硬币或者五毛钱硬币进行购买， * 如果用户通过一块钱硬币进行购买，无人售货机需要进行找零操作，如果有零钱，指示灯灭，找出零钱 * 如果没有，指示灯亮，退回硬币 * 没有零钱，用户还可以通过五毛钱硬币购买 */ #include<iostream> using namespace std; int buy();//函数声明,主要针对需要找零操作的用户，非找零也可以使用，但如果售货机内没有零钱就无法操作 .
制作一个电商数据可视化大屏无从下手？看这篇！
BeWorkingMan的博客
06-09 1385
从字面意思就能看出来，可视化大屏就是有个大屏幕。可视化体现在里面的数据都成了图形和图标， 但是静止的图像也不能完全表现出多报表的结果，可视化大屏是将数据通过图形化、可视化的方式展现在大屏幕上的一种展示形式，通过数据可视化和信息设计手段，将海量数据呈现在大屏幕上，以便于用户快速获取信息和分析数据。通常用于展示企业、政府、学校等机构的数据，如销售额、人员流量、舆情监测等。
无人售货机零售项目echarts展现
04-27
好的，我了解了您的要求，下面是我对此问题的回答： 首先，无人售货机零售项目可以使用echarts来展现数据和图表，echarts是一个基于JavaScript的开源可视化库，可以用于各种数据可视化的场景。 在无人售货机零售项目中，可以使用echarts来展现以下数据和图表： 1.销售数据可视化：通过echarts展现每台售货机的销售情况、销售额、销售量等数据，可以更直观地观察售货机的运营情况。 2.库存数据可视化：通过echarts展现每台售货机的库存情况，包括商品种类、库存量、补货频率等数据，可以更好地管理售货机的库存。 3.用户数据可视化：通过echarts展现用户的购买习惯、消费金额、消费频率等数据，可以更好地了解用户需求和行为，为售货机的经营提供参考。 以上是我对无人售货机零售项目中使用echarts展现数据和图表的建议，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值