大数据可视化结课项目*无人售货机

贺知煜

已于 2024-05-13 11:35:36 修改

阅读量1.7k

点赞数 39

CC 4.0 BY-SA版权

文章标签：信息可视化

于 2024-05-13 11:31:59 首次发布

本文链接：https://blog.youkuaiyun.com/a040607/article/details/138782973

一.效果展示

二.项目解析

1.模块分析

可以看见项目所用到的文件分为四部分：一.css 提供的是HTML中所用的的样式二.data中提供的是图表所用到的数据,图表通过异步加载获取数据三.js 提供的是项目charts所用样式与图表所用js,在sale,total,user,inventory中写的是项目代码。本次所有图表数据写在js中通过在HTML中进行调用js,获取图表数据。四.html中写的是盒框架,是为图表进行分割做的样式

2.项目分析

一.HTML内容展示

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 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>