Echarts------关于无人售货机项目

岸柳垂湖

已于 2024-05-13 13:06:27 修改

阅读量984

点赞数 18

文章标签： echarts 前端 html

于 2024-05-13 11:41:00 首次发布

本文链接：https://blog.csdn.net/2401_83205962/article/details/138791785

版权

2.绘制(条形图)展示商品销售数量前10名

3.绘制(气泡图)展示商品价格区间

4.绘制(折线图)展示销售金额实际值与预测值

2.绘制(簇状柱状图)展示用户消费地点和时间段

3.绘制(折线图)展示近5天用户人数新增和流失趋势

4.绘制(雷达图)展示用户分群

5.绘制(字符云图)展示用户画像

6.用户分析大屏可视化

一.无人售货机背景介绍

1.了解无人售货机零售项目背景

了解背景无人售货机是商业自动化的常用设备，它不受时间、地点的限制，能节省人力、方便交易。

某公司部署的无人售货机，目前经营状况并不理想。为了挖掘经营状况不理想的具体原因，需要了解该公司后台管理系统数据的基本情况

2.分析无人售货机现状

无人售货机产业正在走向信息化，并将进一步实现合理化。从无人售货机的发展趋势来看，无人售货机的出现是由劳动密集型的产业构造向技术密集型转变的产物。大量生产、大量消费以及消费模式和销售环境的变化，要求出现新的流通渠道；而相对的超市、百货购物中心等新的流通渠道的产生，人工费用也在不断上升；加上场地的局限性和购物的便利性等因素的制约，无人售货机作为一种必需的机器便应运而生。某公司部署的无人售货机在高需求背景下，销售额提升缓慢，订单量并未达到预期。为了探究问题的具体原因，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。

3.了解无人售货机数据情况

二.可视化展示销售数据分析

1.数据分析图

环比增长率是以某一期的数据和上期的数据进行比较计算所得到的趋势百分比。用户可以根据环比增长率观察数据的增减变化情况，反映本期比上期增长了多少。

根据各特征数据可以计算各特征环比增长率，观察特征的增减变化情况。通过使用仪表盘来展示数据，可以清晰地看出某个指标值所在的范围。无人售货机各特征数据如表所示。

三.可视化展现销售分析

1.绘制(南丁格尔玫瑰图)

南丁格尔玫瑰图是将柱状图转化为更美观的饼图形式，是极坐标化的柱状图。不同于饼图用角度表现数值或占比，南丁格尔玫瑰图使用扇形的半径表示数据的大小。

为了方便对比分析不同区域无人售货机的销售情况，可以使用南丁格尔玫瑰图对各区域无人售货机的销售金额、订单量、客单价等指标进行可视化展示。

2.绘制(条形图)展示商品销售数量前10名

3.绘制(气泡图)展示商品价格区间

4.绘制(折线图)展示销售金额实际值与预测值

5.销售分析大屏可视化

对无人售货机销售情况进行大屏可视化，如图所示。

由图可以看出，在不同区域的无人售货机中，体育馆的售货机销售金额占比最大，教学楼的售货机订单量占比最大，售货机毛利润占比最大的是操场，售货机客单价平均值最大的是田径场；单价较低的商品销量较高。

四.可视化展现库存分析

1.可视化展现库存分析

Ø 无人售货机库存管理是影响企业赢利能力的重要因素之一。

Ø 依据无人售货机行业背景知识，对售货机库存情况进行可视化展示，通过对数据的多维度展现，分析现有的库存体系，为决策提供数据支持，还原库存体系原貌。

2.绘制(簇状柱状图)展示售货机商品数量

分别对不同地点的售货机的库存数量和缺货数量的比例进行统计后，得到的结果如表所示。

Ø 使用簇状柱状图对不同地点的售货机的设备容量情况进行展示，如图所示，绘制下图的代码详见 charts.int.js 文件。

Ø 由图可以看出，食堂和体育馆这两个地点的售货机商品缺货数量相对较多，教学楼和操场的售货机商品库存数量相对较多。

Ø 使用环形图对不同类型的商品库存数量进行展示，如图所示，绘制下图的代码详见 charts.int.js 文件。

Ø 由图可以看出，饮料类商品库存数量相对较少，碳酸饮料类商品库存数量最多，茶类商品库存数量最少，其他类型的商品库存数量都相差不大。

3.绘制(堆积条形图)展示商品存销量

Ø 使用堆积条形图对商品库存数量和销售数量进行展示，如图所示，绘制下图的代码详见 charts.int.js 文件。

Ø 由图可以看出，酸枣糕的销售数量是最高的，超过200，而营养快线的库存数量最高。

4.绘制(簇状柱状-折线图)展示滞销商品

Ø 使用簇状柱状 - 折线图对商品的滞销金额、库存数量和存货周转率进行展示，如图所示，绘制下图的代码详见 charts.int.js 文件。

Ø 由图可以看出，旺旺牛奶、沙琪玛、安慕希和营养快线的滞销金额较高，各个商品的库存数量都在100以下，小鱼仔的存货周转率最低，沙琪玛的存货周转率最高。

5.绘制(矩形树图)展示商品存货周转天数

6.绘制(簇状柱状-折线图)展示滞销商品

Ø 使用矩形树图对各类商品的存货周转天数进行展示，如图所示，绘制下图的代码详见 charts.int.js 文件。

Ø 由图可以看出，井水豆腐香辣味、香芋面包和沙琪玛 3 种商品的存货周转天数最大。

7.库存分析大屏可视化

Ø 对无人售货机库存情况进行大屏可视化展示，如图所示。

Ø 由图可以看出，在不同区域中，体育馆的无人售货机缺货总量最多；在不同商品品类中，碳酸饮料类的库存最多，商品的存货周转天数最大为9天，旺旺牛奶、沙琪玛、安慕希和营养快线的滞销金额较高。

五.可视化展示用户分析

1.可视化展示用户分析

Ø 对用户的购买行为进行分析，有助于了解用户的消费特点，且能提供个性化的服务，从而提升用户体验和忠诚度。

Ø 依据无人售货机行业背景知识，利用用户消费的时间、地点等指标分析用户行为，对售货机用户情况进行可视化展示。

2.绘制(簇状柱状图)展示用户消费地点和时间段

Ø 对不同地点售货机的用户数量进行统计后，使用簇状柱状图对用户消费地点情况进行展示，如图所示，绘制右图的代码详见 charts.user.js 文件。

Ø 由图可以看出，用户最喜欢的消费地点是教学楼，其次是食堂、田径场和宿舍楼，体育馆的用户数量最少。

Ø 对不同消费时段的售货机用户数量进行统计后，使用簇状柱状图对用户消费时段情况进行展示，如图所示，绘制右图的代码详见 charts.user.js 文件。

Ø 由图可以看出，下午是一天中消费人数最多的时段，早上消费人数最少，用户大部分在白天进行消费。

3.绘制(折线图)展示近5天用户人数新增和流失趋势

Ø 使用折线图对近 5 天用户人数新增和流失趋势进行展示，如图所示，绘制右图的代码详见 charts.user.js 文件。

Ø 由图可以看出，近 5 天新增用户数最大为 25 人，流失用户数平均在5人以上。

4.绘制(雷达图)展示用户分群

Ø 使用环形图对不同用户类型人数进行展示，如图所示，绘制右图的代码详见 charts.user.js 文件。

Ø 由图可以看出，一般用户、潜力用户和流失用户的人数占比较大，忠诚用户的人数占比较小。

5.绘制(字符云图)展示用户画像

Ø 根据用户购买的商品名称和商品数量数据，使用词云图对用户特征进行展示，观察用户的购买喜好，如图所示，绘制右图的代码详见 charts.user.js 文件。

Ø 由图可以看出用户最喜欢购买的商品是沙琪玛，其次是方便面、燕麦饼干、可口可乐等商品。

6.用户分析大屏可视化

Ø 对无人售货机用户情况进行大屏可视化展示，如图所示。

Ø 由图可以看出，用户偏好的消费区域是教学楼，用户偏好的消费时段是下午，用户普遍在白天进行消费；忠诚用户占比较少，说明无人售货机的用户流动性较强，可以根据用户的喜好调整无人售货机的商品结构，吸引用户进行复购，从而提高忠诚用户的占比。

以下是我对Echarts的无人可视化数据的分析

我们先看整体文件

整体框架----及网页页面分析和布局

我们先看其中的一个例子

页面包括了一个标题栏（.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文件