devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

售货机大数据大屏可视化设计_制作无人售货机库存分析可视化大屏

作者：Cpp五条 | 2024-04-07 19:50:43

赞

踩

制作无人售货机库存分析可视化大屏

目录

简介

速成版

代码版

css层叠样式

 数据文件

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

 不同地点售货机销售数据

 不同类型的商品库存数量

不同区域的各指标数据

 不同区域的各指标数据

 不同支付方式用户人数

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

商品库存数量和销售数量

商品销量数量和价格数据

商品销售金额前5名

商品销售数量前10

商品滞销数据

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

 无人售货机各特征数据

销售金额实际值与预测值

用户分群数据

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

用户消费地点数据

用户消费时段数据

库存分析

销售分析

总数据

用户分析

简介

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

速成版

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

代码版

css层叠样式

  1. @charset "utf-8";
  2. /* CSS Document */
  3. html,body,div,h1,h2,h3,h4,h5,h6,pre,a,li,ul{margin:0;padding:0}
  4. 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}
  5. a{text-decoration:none;color:#333}
  6. a:hover{color:#333}
  7. a:active{outline:none}
  8. li{list-style-type:none}
  9. ul,li{list-style:none}
  10. div{text-align:left}
  11. .fr{float:right}
  12. .h55{height:55%!important}
  13. .h45{height:45%!important}
  14.  
  15. /*栅格化*/
  16. .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}
  17. .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}
  18. .pure-g [class*=pure-u]{font-family:sans-serif}
  19. .pure-u-1-24{width:4.1667%}
  20. .pure-u-1-12,.pure-u-2-24{width:8.3333%}
  21. .pure-u-1-8,.pure-u-3-24{width:12.5%}
  22. .pure-u-1-6,.pure-u-4-24{width:16.6667%}
  23. .pure-u-1-5{width:20%}
  24. .pure-u-5-24{width:20.8333%}
  25. .pure-u-1-4,.pure-u-6-24{width:25%}
  26. .pure-u-7-24{width:29.1667%}
  27. .pure-u-1-3,.pure-u-8-24{width:33.3333%}
  28. .pure-u-3-8,.pure-u-9-24{width:37.5%}
  29. .pure-u-2-5{width:40%}
  30. .pure-u-10-24,.pure-u-5-12{width:41.6667%}
  31. .pure-u-11-24{width:45.8333%}
  32. .pure-u-1-2,.pure-u-12-24{width:50%}
  33. .pure-u-13-24{width:54.1667%}
  34. .pure-u-14-24,.pure-u-7-12{width:58.3333%}
  35. .pure-u-3-5{width:60%}
  36. .pure-u-15-24,.pure-u-5-8{width:62.5%}
  37. .pure-u-16-24,.pure-u-2-3{width:66.6667%}
  38. .pure-u-17-24{width:70.8333%}
  39. .pure-u-18-24,.pure-u-3-4{width:75%}
  40. .pure-u-19-24{width:79.1667%}
  41. .pure-u-4-5{width:80%}
  42. .pure-u-20-24,.pure-u-5-6{width:83.3333%}
  43. .pure-u-21-24,.pure-u-7-8{width:87.5%}
  44. .pure-u-11-12,.pure-u-22-24{width:91.6667%}
  45. .pure-u-23-24{width:95.8333%}
  46. .pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
  47.  
  48. /*主体框架*/
  49. html,body{width:100%;height:100%;color:#333}
  50. .warp{margin:0 auto;width:100%}.w100p{width:100%}
  51.  
  52. /*头部*/
  53. .header{height:56px;position:relative;overflow:hidden;text-align:center}
  54. .sysName{display:inline-block;height:56px;width:382px;left:calc(50% - 191px);color:#007fff;position:fixed;border-bottom:1px solid #333}
  55. .sysName:before,.sysName:after{content:"";position:absolute;border-top:58px solid transparent;border-left:25px solid #333;top:-1px;left:0;}
  56. .sysName:after{border-left-color:#fff;left:-1px;top:-1px;}
  57. .sysName .tit{display:block;height:100%;width:100%;text-align:center;line-height:56px;color:#333;font-size:22px}
  58. .sysName .tit:before,.sysName .tit:after{content:"";position:absolute;border-top:58px solid transparent;border-right:25px solid #333;top:-1px;right:0;}
  59. .sysName .tit:after{border-right-color:#fff;right:-1px;top:-1px;}
  60.  
  61. /*菜单*/
  62. .menu{height:100%;margin:0 auto;display:inline-block}
  63. .menu li{float:left;height:100%;height:56px;line-height:56px;font-size:15px;position:relative}
  64. .menu li:before,.menu li:after{content:"";border-bottom:32px solid #ccc;position:absolute;top:18px;left:5px;border-right:15px solid transparent}
  65. .menu li:after{border-bottom-color:#fff;left:4px;top:19px}
  66. .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}
  67. .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}
  68. .menu li a:after{border-top-color:#fff;right:4px;top:17px}
  69. .menu li:nth-child(n+3):before,.menu li:nth-child(n+3):after{
  70. 	border-top:32px solid #ccc;position:absolute;top:18px;left:5px;border-right:15px solid transparent;border-bottom:0}
  71. .menu li:nth-child(n+3):after{border-top-color:#fff;left:4px;top:17px}
  72. .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;}
  73. .menu li:nth-child(n+3) a:after{border-bottom-color:#fff;right:4px;top:19px}
  74. .menu li.sysnameN{width:382px}
  75. .menu li.sysnameN:before,.menu li.sysnameN:after{display:none}
  76. .menu li a:hover{color:#333}
  77. .menu li.on a{background-color:#ddd;color:#333}
  78.  
  79. /**/
  80. .chartWarp{padding:25px 0 10px;height:calc(100% - 91px)}
  81.  
  82. .toal-row1{height:30%}
  83. .toal-row1 .chartBlock{height:calc(100% - 53px);position:relative}
  84. .toal-row1 .chartBlock .chartDiv{position:absolute!important;top:30%;left:0}
  85. .toal-row2{height:calc(40% - 15px);margin-bottom: 15px;}
  86. .toal-row3{height:30%}
  87.  
  88. .saleWarp .sale-row1{height:38%}
  89. .saleWarp .sale-row2{height:62%}
  90. .saleWarp .sale-row2 .tSel{height:calc(100% - 50px);margin-top: 20px;}
  91.  
  92. .inventoryWarp .int-row1{height:100%}
  93. .int-row1 .h55{height:calc(55% - 20px)!important;margin-bottom:20px}
  94. .int-row1 .tSel{height:calc(55% - 70px)!important;margin-top:20px}
  95.  
  96. .userWarp .user-row1{height:67%}
  97. .userWarp .user-row2{height:33%}
  98. .userWarp .user-row1 .col2 .chartBlock{height:calc(50% - 10px);margin-bottom:20px}
  99. .userWarp .user-row1 .col2 .chartBlock:last-child{margin-bottom:0}
  100.  
  101. .pure-g [class*="pure-u-"],.pure-g [class^=pure-u-]{box-sizing:border-box;height:100%;padding:10px 10px}
  102. .chartDiv{position:relative;z-index:10;width:100%;height:100%;display:block}
  103.  
  104. /**/
  105. .chartBlock{width:100%;height:100%;position:relative}
  106. .chartBlock .hd{height:32px;width:100%;text-align:center;position:absolute;top:-15px;z-index:1}
  107. .chartBlock .hd .chartTit{display:inline-flex;background:#fff;}
  108. .chartTit{display:inline-block;height:32px;line-height:32px;width:60%;padding:0 15px;position:relative;margin:0 auto}
  109. .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}
  110. .chartTit:after{border-width:15px;border-right-color:#f5f5f5;left:0px;top:1px}
  111. .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}
  112. .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}
  113. .chartTit .titContent:after{border-width:15px;border-left-color:#f5f5f5;right:0px;top:1px}
  114. .chartBlock .bd{border:1px solid #ccc;height:calc(100% - 32px);position:relative;width:calc(100% - 32px);padding:15px}
  115.  
  116. .subBlock{position:relative;border:1px solid #ccc;border-top:0}
  117. .subBlock .subCon{height:32px;line-height:32px}
  118. .subBlock .subtxt{float:left;margin-left:10px;height:32px;font-size:12px;color:#333}
  119. .subBlock .subNum{font-weight:bold;font-size:15px;float:right;margin-right:10px}
  120.  
  121. .toal-row1 .pure-u-1-5:nth-child(1) .subBlock .subNum{color:#1779d9}
  122. .toal-row1 .pure-u-1-5:nth-child(2) .subBlock .subNum{color:#30b761}
  123. .toal-row1 .pure-u-1-5:nth-child(3) .subBlock .subNum{color:#d04a4b}
  124. .toal-row1 .pure-u-1-5:nth-child(4) .subBlock .subNum{color:#ca841e}
  125. .toal-row1 .pure-u-1-5:nth-child(5) .subBlock .subNum{color:#00a7c2}

 数据文件

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

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

 不同地点售货机销售数据

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

 不同类型的商品库存数量

  1. {
  2. "data":[
  3. {"value":760, "name":"流失用户"},
  4. {"value":234, "name":"忠诚用户"},
  5. {"value":800, "name":"潜力用户"},
  6. {"value":800, "name":"一般用户"}
  7. ]
  8. }

不同区域的各指标数据

  1. {
  2. "data":[
  3. {"value":760, "name":"流失用户"},
  4. {"value":234, "name":"忠诚用户"},
  5. {"value":800, "name":"潜力用户"},
  6. {"value":800, "name":"一般用户"}
  7. ]
  8. }

 不同区域的各指标数据

  1. {
  2. "where":["教学楼","食堂","体育馆","田径场","操场"],
  3. "sale":[
  4. {"value":283122, "name":"教学楼"},
  5. {"value":253597, "name":"食堂"},
  6. {"value":299874, "name":"体育馆"},
  7. {"value":260256, "name":"田径场"},
  8. {"value":186585, "name":"操场"}],
  9.  
  10. "order":[
  11. {"value":9097, "name":"教学楼"},
  12. {"value":5597, "name":"食堂"},
  13. {"value":8608, "name":"体育馆"},
  14. {"value":7602, "name":"田径场"},
  15. {"value":4865, "name":"操场"}],
  16. 	
  17. "gross":[
  18. {"value":146805, "name":"教学楼"},
  19. {"value":104936, "name":"食堂"},
  20. {"value":157321, "name":"体育馆"},
  21. {"value":160256, "name":"田径场"},
  22. {"value":186585, "name":"操场"}],
  23.  
  24. "unit":[
  25. {"value":12.07, "name":"教学楼"},
  26. {"value":9.13, "name":"食堂"},
  27. {"value":11.03, "name":"体育馆"},
  28. {"value":14.8, "name":"田径场"},
  29. {"value":12.6, "name":"操场"}]
  30. }

 不同支付方式用户人数

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

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

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

商品库存数量和销售数量

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

商品销量数量和价格数据

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

商品销售金额前5名

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

商品销售数量前10

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

商品滞销数据

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

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

  1. {
  2. "日期":["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"],
  3. "销售金额":[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],
  4. "销售金额环比增长率":[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]
  5. }

 无人售货机各特征数据

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

销售金额实际值与预测值

  1. {
  2. 	"D":["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日"],
  3. 	"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],
  4. 	"Y":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  5. }

用户分群数据

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

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

  1. {
  2. 	"data": [
  3. 		{"value":22199,"name":"安慕希"},
  4. 		{"value":10288,"name":"井水豆腐香辣味"},
  5. 		{"value":274470,"name":"蒙牛纯牛奶"},
  6. 		{"value":12311,"name":"王老吉"},
  7. 		{"value":4885,"name":"小鱼仔"},
  8. 		{"value":32294,"name":"可口可乐"},
  9. 		{"value":18574,"name":"咖啡"},
  10. 		{"value":38929,"name":"旺仔牛奶"},
  11. 		{"value":969,"name":"豆腐干"},
  12. 		{"value":37517,"name":"燕麦饼干"},
  13. 		{"value":12053,"name":"QQ糖"},
  14. 		{"value":57299,"name":"方便面"},
  15. 		{"value":15418,"name":"碎碎冰"},
  16. 		{"value":22905,"name":"矿泉水"},
  17. 		{"value":5146,"name":"怪味豆"}
  18. 	]
  19. }

用户消费地点数据

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

用户消费时段数据

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

库存分析

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>售货机大数据分析平台</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7. </head>
  8. <body>
  9. <div class="header">
  10.   <div class="sysName">
  11.     <h1 class="tit">售货机大数据分析平台</h1>
  12.   </div>
  13.   <div class="menu">
  14.     <ul>
  15.       <li><a href="total.html">总数据</a></li>
  16.       <li><a href="sale.html">销售分析</a></li>
  17.       <li class="sysnameN"></li>
  18.       <li class="on"><a href="inventory.html">库存分析</a></li>
  19.       <li><a href="user.html">用户分析</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <div class="chartWarp inventoryWarp">
  24.  
  25.   <div class="pure-g int-row1"> 
  26.     <!-- 存销量 -->
  27.     <div class="pure-u-1-3">
  28.       <!-- 设备容量 -->
  29.       <div class="chartBlock h55">
  30.         <div class="hd">
  31.           <div class="chartTit">
  32.             <h2 class="titContent">设备容量</h2>
  33.           </div>
  34.         </div>
  35.         <div class="bd">
  36.           <div id="mVolume" class="chartDiv"></div>
  37.         </div>
  38.       </div>
  39.       <!-- 品类库存占比 -->
  40.       <div class="chartBlock h45">
  41.         <div class="hd">
  42.           <div class="chartTit">
  43.             <h2 class="titContent">品类库存占比</h2>
  44.           </div>
  45.         </div>
  46.         <div class="bd">
  47.           <div id="categoryStock" class="chartDiv"></div>
  48.         </div>
  49.       </div>
  50.     </div>
  51.     <div class="pure-u-1-3">
  52.       <div class="chartBlock">
  53.         <div class="hd">
  54.           <div class="chartTit">
  55.             <h2 class="titContent">存销量</h2>
  56.           </div>
  57.         </div>
  58.         <div class="bd">
  59.           <div id="stockSales" class="chartDiv"></div>
  60.         </div>
  61.       </div>
  62.     </div>
  63.     <div class="pure-u-1-3"> 
  64.       <!-- 商品存货周转天数 -->
  65.       <div class="chartBlock h55">
  66.         <div class="hd">
  67.           <div class="chartTit">
  68.             <h2 class="titContent">商品存货周转天数</h2>
  69.           </div>
  70.         </div>
  71.         <div class="bd">
  72.           <div id="turnaround" class="chartDiv"></div>
  73.         </div>
  74.       </div>
  75.       <!-- 滞销商品 -->
  76.       <div class="chartBlock h45">
  77.         <div class="hd">
  78.           <div class="chartTit">
  79.             <h2 class="titContent">滞销商品</h2>
  80.           </div>
  81.         </div>
  82.         <div class="bd">
  83.           <div id="unsalable" class="chartDiv"></div>
  84.         </div>
  85.       </div>
  86.     </div>
  87.   </div>
  88. </div>
  89. </body>
  90. <script language="javascript" type="text/javascript" src="js/echarts.js"></script>
  91. <script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
  92. <script language="javascript" type="text/javascript" src="js/charts.int.js"></script>
  93. </html>

销售分析

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>售货机大数据分析平台</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7. </head>
  8. <body>
  9. <div class="header">
  10.   <div class="sysName">
  11.     <h1 class="tit">售货机大数据分析平台</h1>
  12.   </div>
  13.   <div class="menu">
  14.     <ul>
  15.       <li><a href="total.html">总数据</a></li>
  16.       <li class="on"><a href="sale.html">销售分析</a></li>
  17.       <li class="sysnameN"></li>
  18.       <li><a href="inventory.html">库存分析</a></li>
  19.       <li><a href="user.html">用户分析</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <div class="chartWarp saleWarp">
  24.   <div class="pure-g sale-row1">
  25.     <div class="pure-u-1-4">
  26.       <div class="chartBlock">
  27.         <div class="hd">
  28.           <div class="chartTit">
  29.             <h2 class="titContent">销售金额（元）</h2>
  30.           </div>
  31.         </div>
  32.         <div class="bd">
  33.           <div id="saleM_Site" class="chartDiv"></div>
  34.         </div>
  35.       </div>
  36.     </div>
  37.     <div class="pure-u-1-4">
  38.       <div class="chartBlock">
  39.         <div class="hd">
  40.           <div class="chartTit">
  41.             <h2 class="titContent">订单量（个）</h2>
  42.           </div>
  43.         </div>
  44.         <div class="bd">
  45.           <div id="orderQ_Site" class="chartDiv"></div>
  46.         </div>
  47.       </div>
  48.     </div>
  49.     <div class="pure-u-1-4">
  50.       <div class="chartBlock">
  51.         <div class="hd">
  52.           <div class="chartTit">
  53.             <h2 class="titContent">毛利润（元）</h2>
  54.           </div>
  55.         </div>
  56.         <div class="bd">
  57.           <div id="grossM_Site" class="chartDiv"></div>
  58.         </div>
  59.       </div>
  60.     </div>
  61.     <div class="pure-u-1-4">
  62.       <div class="chartBlock">
  63.         <div class="hd">
  64.           <div class="chartTit">
  65.             <h2 class="titContent">客单价（元）</h2>
  66.           </div>
  67.         </div>
  68.         <div class="bd">
  69.           <div id="unitP_Site" class="chartDiv"></div>
  70.         </div>
  71.       </div>
  72.     </div>
  73.   </div>
  74.  
  75.  
  76.   <div class="pure-g sale-row2">
  77.     <div class="pure-u-1-4">
  78. 		  <div class="chartBlock">
  79.         <div class="hd">
  80.           <div class="chartTit">
  81.             <h2 class="titContent">销售金额预测值与实际值</h2>
  82.           </div>
  83.         </div>
  84.         <div class="bd">
  85.           <div id="saleAll" class="chartDiv"></div>
  86.         </div>
  87.       </div>
  88.     </div>
  89.     <div class="pure-u-1-2">
  90. 		  <div class="chartBlock">
  91.         <div class="hd">
  92.           <div class="chartTit">
  93.             <h2 class="titContent">商品价格区间</h2>
  94.           </div>
  95.         </div>
  96.         <div class="bd">
  97.           <div id="priceRange" class="chartDiv"></div>
  98.         </div>
  99.       </div>
  100.     </div>
  101.     <div class="pure-u-1-4">
  102. 		  <div class="chartBlock">
  103.         <div class="hd">
  104.           <div class="chartTit">
  105.             <h2 class="titContent">商品销售数量前10名</h2>
  106.           </div>
  107.         </div>
  108.         <div class="bd">
  109.           <div id="saleMtop10" class="chartDiv"></div>
  110.         </div>
  111.       </div>
  112.     </div>
  113.   </div>
  114.  
  115. </div>
  116. </body>
  117. <script language="javascript" type="text/javascript" src="js/echarts.js"></script>
  118. <script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
  119. <script language="javascript" type="text/javascript" src="js/charts.sale.js"></script> 
  120. </html>

总数据

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>售货机大数据分析平台</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7. </head>
  8. <body>
  9. <div class="header">
  10.   <div class="sysName">
  11.     <h1 class="tit">售货机大数据分析平台</h1>
  12.   </div>
  13.   <div class="menu">
  14.     <ul>
  15.       <li class="on"><a href="total.html">总数据</a></li>
  16.       <li><a href="sale.html">销售分析</a></li>
  17.       <li class="sysnameN"></li>
  18.       <li><a href="inventory.html">库存分析</a></li>
  19.       <li><a href="user.html">用户分析</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <div class="chartWarp toalWarp">
  24.   <div class="pure-g toal-row1"> 
  25.     <!-- 销售金额（元）-->
  26.     <div class="pure-u-1-5">
  27.       <div class="chartBlock">
  28.         <div class="hd">
  29.           <div class="chartTit">
  30.             <h2 class="titContent">销售金额（元）</h2>
  31.           </div>
  32.         </div>
  33.         <div class="bd">
  34.           <div id="saleM" class="chartDiv"></div>
  35.         </div>
  36.       </div>
  37.       <div class="subBlock">
  38.         <div class="subCon">
  39.           <div class="subtxt">销售金额环比增长率</div>
  40.           <div class="subNum">-1.4%</div>
  41.         </div>
  42.       </div>
  43.     </div>
  44.     <!-- 订单量（个）-->
  45.     <div class="pure-u-1-5">
  46.       <div class="chartBlock">
  47.         <div class="hd">
  48.           <div class="chartTit">
  49.             <h2 class="titContent">订单量（个）</h2>
  50.           </div>
  51.         </div>
  52.         <div class="bd">
  53.           <div id="orderQ" class="chartDiv"></div>
  54.         </div>
  55.       </div>
  56.       <div class="subBlock">
  57.         <div class="subCon">
  58.           <div class="subtxt">订单量环比增长率</div>
  59.           <div class="subNum">11.1%</div>
  60.         </div>
  61.       </div>
  62.     </div>
  63.     <!-- 毛利（元）-->
  64.     <div class="pure-u-1-5">
  65.       <div class="chartBlock">
  66.         <div class="hd">
  67.           <div class="chartTit">
  68.             <h2 class="titContent">毛利润（元）</h2>
  69.           </div>
  70.         </div>
  71.         <div class="bd">
  72.           <div id="grossM" class="chartDiv"></div>
  73.         </div>
  74.       </div>
  75.       <div class="subBlock">
  76.         <div class="subCon">
  77.           <div class="subtxt">毛利润环比增长率</div>
  78.           <div class="subNum">3.6%</div>
  79.         </div>
  80.       </div>
  81.     </div>
  82.     <!-- 售货机数量（台）-->
  83.     <div class="pure-u-1-5">
  84.       <div class="chartBlock">
  85.         <div class="hd">
  86.           <div class="chartTit">
  87.             <h2 class="titContent">售货机数量（台）</h2>
  88.           </div>
  89.         </div>
  90.         <div class="bd">
  91.           <div id="discount" class="chartDiv"></div>
  92.         </div>
  93.       </div>
  94.       <div class="subBlock">
  95.         <div class="subCon">
  96.           <div class="subtxt">售货机数量环比增长率</div>
  97.           <div class="subNum">2.99%</div>
  98.         </div>
  99.       </div>
  100.     </div>
  101.     <!-- 购买用户数（人）-->
  102.     <div class="pure-u-1-5">
  103.       <div class="chartBlock">
  104.         <div class="hd">
  105.           <div class="chartTit">
  106.             <h2 class="titContent">购买用户数（人）</h2>
  107.           </div>
  108.         </div>
  109.         <div class="bd">
  110.           <div id="unitP" class="chartDiv"></div>
  111.         </div>
  112.       </div>
  113.       <div class="subBlock">
  114.         <div class="subCon">
  115.           <div class="subtxt">购买用户数环比增长率</div>
  116.           <div class="subNum">1.77%</div>
  117.         </div>
  118.       </div>
  119.     </div>
  120.   </div>
  121.   <div class="pure-g toal-row2">
  122.     <div class="pure-u-1-1">
  123.       <div class="chartBlock">
  124.         <div class="hd">
  125.           <div class="chartTit">
  126.             <h2 class="titContent">销售金额变化趋势</h2>
  127.           </div>
  128.         </div>
  129.         <div class="bd">
  130.           <div id="saleRate" class="chartDiv"></div>
  131.         </div>
  132.       </div>
  133.     </div>
  134.   </div>
  135.   <div class="pure-g toal-row3">
  136.     <div class="pure-u-1-3">
  137.       <div class="chartBlock">
  138.         <div class="hd">
  139.           <div class="chartTit">
  140.             <h2 class="titContent">商品销售金额前5名</h2>
  141.           </div>
  142.         </div>
  143.         <div class="bd">
  144.           <div id="saleMtop5" class="chartDiv"></div>
  145.         </div>
  146.       </div>
  147.     </div>
  148.     <div class="pure-u-1-3">
  149.       <div class="chartBlock">
  150.         <div class="hd">
  151.           <div class="chartTit">
  152.             <h2 class="titContent">售货机销售情况</h2>
  153.           </div>
  154.         </div>
  155.         <div class="bd">
  156.           <div id="saleOrder" class="chartDiv"></div>
  157.         </div>
  158.       </div>
  159.     </div>
  160.     <div class="pure-u-1-3">
  161.       <div class="chartBlock">
  162.         <div class="hd">
  163.           <div class="chartTit">
  164.             <h2 class="titContent">用户支付方式占比</h2>
  165.           </div>
  166.         </div>
  167.         <div class="bd">
  168.           <div id="payWay" class="chartDiv"></div>
  169.         </div>
  170.       </div>
  171.     </div>
  172.   </div>
  173. </div>
  174. </body>
  175. <script language="javascript" type="text/javascript" src="js/echarts.js"></script>
  176. <script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
  177. <script language="javascript" type="text/javascript" src="js/charts.total.js"></script>
  178. </html>

用户分析

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>售货机大数据分析平台</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7. </head>
  8. <body>
  9. <div class="header">
  10.   <div class="sysName">
  11.     <h1 class="tit">售货机大数据分析平台</h1>
  12.   </div>
  13.   <div class="menu">
  14.     <ul>
  15.       <li><a href="total.html">总数据</a></li>
  16.       <li><a href="sale.html">销售分析</a></li>
  17.       <li class="sysnameN"></li>
  18.       <li><a href="inventory.html">库存分析</a></li>
  19.       <li class="on"><a href="user.html">用户分析</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <div class="chartWarp userWarp">
  24.  
  25.   <div class="pure-g user-row1">
  26.     <div class="pure-u-7-24 col2">
  27.       <div class="chartBlock">
  28.         <div class="hd">
  29.           <div class="chartTit">
  30.             <h2 class="titContent">近5天用户人数新增和流失趋势</h2>
  31.           </div>
  32.         </div>
  33.         <div class="bd">
  34.           <div id="lossGrowth" class="chartDiv"></div>
  35.         </div>
  36.       </div>
  37.       <div class="chartBlock">
  38.         <div class="hd">
  39.           <div class="chartTit">
  40.             <h2 class="titContent">用户类型人数</h2>
  41.           </div>
  42.         </div>
  43.         <div class="bd">
  44.           <div id="cSorNum" class="chartDiv"></div>
  45.         </div>
  46.       </div>
  47.     </div>
  48.     <div class="pure-u-10-24">
  49.       <div class="chartBlock">
  50.         <div class="hd">
  51.           <div class="chartTit">
  52.             <h2 class="titContent">用户分群</h2>
  53.           </div>
  54.         </div>
  55.         <div class="bd">
  56.           <div id="userGroup" class="chartDiv"></div>
  57.         </div>
  58.       </div>
  59.     </div>
  60.     <div class="pure-u-7-24 col2">
  61.       <div class="chartBlock">
  62.         <div class="hd">
  63.           <div class="chartTit">
  64.             <h2 class="titContent">商品价格区间</h2>
  65.           </div>
  66.         </div>
  67.         <div class="bd">
  68.           <div id="pInterval" class="chartDiv"></div>
  69.         </div>
  70.       </div>
  71.       <div class="chartBlock">
  72.         <div class="hd">
  73.           <div class="chartTit">
  74.             <h2 class="titContent">用户消费地点</h2>
  75.           </div>
  76.         </div>
  77.         <div class="bd">
  78.           <div id="expLoc" class="chartDiv"></div>
  79.         </div>
  80.       </div>
  81.     </div>
  82.   </div>
  83.   <div class="pure-g user-row2">
  84. <!--
  85.     <div class="pure-u-7-24">
  86.       
  87.       <div class="chartBlock">
  88.         <div class="hd">
  89.           <div class="chartTit">
  90.             <h2 class="titContent">会员与非会员人数</h2>
  91.           </div>
  92.         </div>
  93.         <div class="bd">
  94.           <div id="vipC" class="chartDiv"></div>
  95.         </div>
  96.       </div>
  97.      
  98.     </div>
  99.  -->
  100.     <div class="pure-u-12-24">
  101.       <div class="chartBlock">
  102.         <div class="hd">
  103.           <div class="chartTit">
  104.             <h2 class="titContent">用户消费时段</h2>
  105.           </div>
  106.         </div>
  107.         <div class="bd">
  108.           <div id="expTime" class="chartDiv"></div>
  109.         </div>
  110.       </div>
  111.     </div>
  112.     <div class="pure-u-12-24">
  113.       <div class="chartBlock">
  114.         <div class="hd">
  115.           <div class="chartTit">
  116.             <h2 class="titContent">用户画像</h2>
  117.           </div>
  118.         </div>
  119.         <div class="bd">
  120.           <div id="userHot" class="chartDiv"></div>
  121.         </div>
  122.       </div>
  123.     </div>
  124.   </div>
  125.  
  126. </div>
  127. </body>
  128. <script language="javascript" type="text/javascript" src="js/echarts.js"></script>
  129. <script language="javascript" type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
  130. <script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
  131. <script language="javascript" type="text/javascript" src="js/charts.user.js"></script>
  132. <!-- <script language="javascript" type="text/javascript" src="js/lossgrowth.js"></script> -->
  133. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/380241
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号