Echarts——售货机大数据分析平台

Hadint。

已于 2024-05-13 11:25:06 修改

阅读量1.5k

点赞数 13

文章标签： echarts

于 2024-05-13 08:38:21 首次发布

本文链接：https://blog.youkuaiyun.com/h_adint/article/details/138783531

版权

整体文件

1.框架——分析平台的界面布局

页面包括一个顶部的标题和菜单栏，以及几个不同的图表块，用于展示库存相关的数据分析结果

以其中一个为例：

链接到一个名为"reset.css"的外部CSS文件,为后续的内容和样式提供了基础

<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />  
</head>

页面包括了一个标题栏（.header）、一个导航栏（.menu）和一个图表区域（.chartWarp.inventoryWarp）

标题栏（.header）：包含了平台的名称（“售货机大数据分析平台”）。

导航栏（.menu）：包含了五个链接，分别指向总数据、销售分析、库存分析、用户分析页面。其中“库存分析”链接处于选中状态（.on）。

图表区域（.chartWarp.inventoryWarp）：包含了几个图表块，用于展示库存分析结果，包括：

设备容量（.chartBlock.h55）
- 品类库存占比（.chartBlock.h45）
- 存销量（.chartBlock）
- 商品存货周转天数（.chartBlock.h55）
- 滞销商品（.chartBlock.h45）

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

echarts.js：一个用于创建交互式可视化图表库

jquery-3.3.1.js：一个用于处理异步数据同步

charts.int.js：一个包含特定于库存分析页面的图表创建和操作逻辑的自定义JavaScript文件

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