Echarts“无人售货机”大屏展示 项目分析

已于 2024-05-13 10:38:06 修改
阅读量1.5k 收藏 46
点赞数 19
文章标签： echarts 前端 javascript
于 2024-05-13 09:39:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77751917/article/details/138783205
版权

目录

一、简介

二、销售分析大屏可视化  charts.sale.js

1.南丁格尔玫瑰图 (type: 'pie') 展示不同地点无人售货机的总销售金额

2.条形图 (type: 'bar')展示商品销售数量前10

3.气泡图 (type: 'scatter')展示商品价格区间

4. 折线图 （type:'line'）展示销售金额实际值与预测值

三、总数据大屏可视化  charts.total.js 

1.仪表盘 （type: 'gauge'）展示各特征及其环比增长率

2.簇状柱状-折线图（type:'bar'，'line’）展示销售金额变化趋势

3.条形图（type: 'bar'）展示商品销售金额前5名 

4.簇状柱状图展示售货机销售情况

5.饼图展示用户支付方式占比

四、库存分析大屏可视化 charts.int.js

1.簇状柱状图展示售货机商品数量

2.环形图展示品类库存占比

3.堆积条形图展示商品存销量

4.簇状柱状-折线图展示商品的存货周转天数 

5.矩形树图展示滞销商品

五、用户分析可视化展示 charts.user.js

1.折线图展示近7天用户人数新增和流失趋势

2.环形图展示用户类型人数占比

3.簇状柱状图展示用户消费地点和消费时段

4.雷达图展示用户分群

5.气泡图展示商品价格区间

6.字符云图展示用户画像

一、简介

在无人售货机信息表数据的预处理与建模完成后，从无人售货机销售的整体情况、销售情况、库存情况和用户情况4个方向对预处理和建模后的数据进行可视化展现与分析。

  • 首先，我们在js文件夹下，放入所需js文件，创建四个对应大屏的js文件

总数据：charts.total.js

销售分析：charts.sale.js

库存分析：charts.int.js

用户分析：charts.user.js

  • 然后创建四个html文件，里面写入大屏壳子

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

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

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

 user.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>
  • data文件夹中放入异步数据加载的数据

二、销售分析大屏可视化  charts.sale.js

1.南丁格尔玫瑰图 (type: 'pie') 展示不同地点无人售货机的总销售金额

以下以销售金额（元）为例，进行异步数据加载

var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    saleM_Site.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a}:{d}%'
          },
        grid: {
            left: '0%',
            top:'60',
            right:'10%',
            bottom: '10',
            containLabel: true
        },
    legend: {
        type:'scroll',
        data:data.where,
      },
    series: [
        {
          name: '销售金额',
          type: 'pie',
          radius: [20, 40],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            //   show: false  指向数据，默认为开启
            formatter: '{c}'   //指向数据
             },
          emphasis: {
            label: {
              show: true
            }
          },
          data: data.sale
        }],
})
});
//订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    orderQ_Site.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a}:{d}%'
          },
          legend: {
            type:'scroll',
            data:data.where,
          },
          grid: {
            left: '0%',
            top:'60',
            right:'10%',
            bottom: '10',
            containLabel: true
        },
    series: [
        {
          name: '订单量',
          type: 'pie',
          radius: [20, 40],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            //   show: false  指向数据，默认为开启
            formatter: '{c}'   //指向数据
             },
          emphasis: {
            label: {
              show: true
            }
          },
          data: data.order
        }],
})
});
//毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    grossM_Site.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a}:{d}%'
          },
          legend: {
            type:'scroll',
            data:data.where,
          },
          grid: {
            left: '0%',
            top:'60',
            right:'10%',
            bottom: '10',
            containLabel: true
        },
    series: [
        {
          name: '毛利润',
          type: 'pie',
          radius: [20, 40],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            //   show: false  指向数据，默认为开启
            formatter: '{c}'   //指向数据
             },
          emphasis: {
            label: {
              show: true
            }
          },
          data: data.gross
        }],
})
});

//客单价
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    unitP_Site.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a}:{d}%'
          },
          legend: {
            type:'scroll',
            data:data.where,
          },
          grid: {
            left: '0%',
            top:'60',
            right:'10%',
            bottom: '10',
            containLabel: true
        },
    series: [
        {
          name: '售货机数量',
          type: 'pie',
          radius: [20, 40],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
           label: {
          //   show: false  指向数据，默认为开启
          formatter: '{c}'   //指向数据
           },
          emphasis: {
            label: {
              show: true
            }
          },
          data: data.unit
        }],
})
});


window.onresize = function() {
    turnaround.resize();
    stockSales.resize();
    unsalable.resize();
    categoryStock.resize();
    mVolume.resize();
}
2.条形图 (type: 'bar')展示商品销售数量前10

//商品销售数量前10名
var saleMtop10 = echarts.init(document.getElementById('saleMtop10'));
$.get("data/商品销售数量前10.json").done(function (data){
  saleMtop10.setOption({
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
    },
    yAxis: {
      name: '商品名称',
      data: data.商品名称
    },
    series: [
      {
        name: '销售数量',
        type: 'bar',
        data: data.销售数量
      },
    ]
  })
});
3.气泡图 (type: 'scatter')展示商品价格区间

//商品价格区间
var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data){
  var series=[];
  for (var i=0;i< data.data.length;i++) {
    series.push({
      name:data.data[i].name,
      type: 'scatter',
      symbolSize:data.data[i].value[1]*2.4,
      data: [data.data[i].value]
    });
  }
  priceRange.setOption({
    legend: {
        type:'scroll',  
        left: 10,
        top: 20,
      },
      tooltip: {
        confine:true,
        enterable:true,
    },
    yAxis: [
        {
            scale:true,    
         },
    ],
    xAxis: [
        {
           scale:true,              
        },
    ],
      series:series
  }) 
});
4. 折线图 （type:'line'）展示销售金额实际值与预测值

//销售金额预测值与实际值
var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/不同区域的各指标数据.json").done(function (data){
	saleAll.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type:'scroll'
    },
    xAxis:{
        type: 'category',
        data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日',
		'11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日']
    },
    yAxis:{
        type: 'value',
        name: '金额（万元）',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name:'销售金额实际值',
            type:'line',
            data:[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],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(194, 53, 49,.8)'
                    }, 
                    {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            },
        },
        {
            type:'line',
            name:'销售金额预测值',
            data:[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            areaStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(47, 69, 84,.4)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            }
        },
    ]
	})
})

三、总数据大屏可视化  charts.total.js 

1.仪表盘 （type: 'gauge'）展示各特征及其环比增长率

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.get("data/无人售货机各特征数据.json").done(function (data) {
  //data = JSON.parse(data);
  saleT('saleM', '销售金额', 0, data.销售金额[0], data.销售金额[1], data.销售金额[2], '','#1779d9','rgba(23,121,217,0.6)');
  saleT('orderQ', '订单量', 0, data.订单量[0], data.订单量[1], data.订单量[2], '','#30b761','rgba(48,183,97,0.5)');
  saleT('grossM', '毛利润', 0, data.毛利润[0], data.毛利润[1], data.毛利润[2], '','#d04a4b','rgba(208,74,75,0.5)');
  saleT('discount', '折扣额', 0, data.折扣额[0], data.折扣额[1], data.折扣额[2], '千','#ca841e','rgba(202,132,30,0.5)');
  saleT('unitP', '客单价', 0, data.客单价[0], data.客单价[1], data.客单价[2], '','#00a7c2','rgba(0,167,194,0.5)');
});
/*
*id: chart容器id;
*title: 仪表盘名称
*min: 最小值
*max: 最大值
*val: 当前实际值
*tag: 目标值
*unit: 单位符号
*color1: 主轴颜色
*/

var saleM = echarts.init(document.getElementById("saleM"));
var orderQ = echarts.init(document.getElementById("orderQ"));
var grossM = echarts.init(document.getElementById("grossM"));
var discount = echarts.init(document.getElementById("discount"));
var unitP = echarts.init(document.getElementById("unitP"));

function saleT(id, title, min, max, val, tag, unit, color1,  color2) {

  var myChart = echarts.init(document.getElementById(id));

  option = {
      tooltip: {
          confine:true,
          trigger: 'item',
          formatter:function(data){
              hbl = (data.value/tag).toFixed(2);
              return title + "：" + data.value + '<br/>' + name + "：" + hbl
          }
      },
      series: [{
          startAngle: 180, 
          endAngle: 0,
          splitNumber: 1,
          name: title,
          type: 'gauge',
          radius: '100%',
          axisLine: {
              lineStyle: {
                  color: [
                      [0.25, '#1779da'],
                      [0.5, '#1779da'],
                      [1, '#ddd']
                  ],
                  width: 20
              }
          },
          axisTick: { show: false },
          axisLabel: { 
              distance:0,
              width:30,
              height:24,
              lineHeight:24,
              padding:[25,-30,0],
              color:'rgba(255,255,255,0.5)',
              formatter: function (value) {
                  if(unit=='千'){
                      return (value/1000).toFixed(1) + ' ' + unit;
                  }else if(unit=='万'){
                      return (value/10000).toFixed(1) + ' ' + unit;
                  }else{
                      return value;
                  }
              }
          },
          splitLine: { show: false },
          pointer: { show:false, width: 3 },
          title: {
              offsetCenter: [0, '92%'],
              color:'rgba(255,255,255,0.7)'
          },
          detail: {
              offsetCenter: [0, '-10%'],
              formatter: function(value){
                  value1 = value / tag;
                  return '{a|' + value.toFixed(1) + '}';
              },
              rich: {
                  a: {
                      fontSize:'16',
                      fontWeight:'bold'
                  }
              }
          },
          data: [{}]
      }]
  };
  option.series[0].min = min;
  option.series[0].max = max;
  option.series[0].data[0].value = val;
  option.series[0].axisLine.lineStyle.color[0][0] = (tag - min) / (max - min);
  option.series[0].axisLine.lineStyle.color[0][1] = color2;
  option.series[0].axisLine.lineStyle.color[1][0] = (val - min) / (max - min);
  option.series[0].axisLine.lineStyle.color[1][1] = color1;

  myChart.setOption(option);

}
2.簇状柱状-折线图（type:'bar'，'line’）展示销售金额变化趋势

3.条形图（type: 'bar'）展示商品销售金额前5名 

//商品销售金额Top5
var saleMtop5 = echarts.init(document.getElementById('saleMtop5'));
$.get("data/商品销售金额前5名.json").done(function (data) {
  //data = JSON.parse(data);
saleMtop5.setOption({
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      }
  },
  grid: {
      x: 10,
      y: 20,
      x2: 10,
      y2: 10,
      containLabel: true
  },
  barCategoryGap:'40%',
  xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine:{lineStyle:{width:0}},
  },
  yAxis: {
      type: 'category',
      splitLine:{lineStyle:{width:0}},
      data: data.商品名称
  },
  series: [
      {
          name: '售出总数量',
          type: 'bar',
          label:{
              position:'right',
              verticalAlign:'middle',
          },
          data: data.销售金额
      }
  ]
  })
});
4.簇状柱状图展示售货机销售情况

//售货机销售情况
var saleOrder = echarts.init(document.getElementById('saleOrder'));
$.get("data/不同地点售货机销售数据.json").done(function (data) {
  //data = JSON.parse(data);
saleOrder.setOption({
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'cross',
          crossStyle: {
              color: '#999'
          }
      }
  },
  grid: {
      x: 10,
      y: 50,
      x2: 10,
      y2: 10,
      containLabel: true
  },
  toolbox: {
      show:false,
      feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
      }
  },
  legend: {
      top:10
  },
  barGap:'10%',
  barCategoryGap:'35%',
  xAxis: [
      {
          type: 'category',
          data: data.地点,
          axisPointer: {
              type: 'shadow'
          },
          splitLine:{lineStyle:{width:0}},
      }
  ],
  yAxis: [
      {
          type: 'value',
          name: '',
          min: 0,
          axisLabel: {
              formatter: '{value}'
          },
          axisLine:{lineStyle:{width:0}},
      }
  ],
  series: [
      {
          name:'销售金额',
          type:'bar',
          data:data.销售金额
      },
      {
          name:'订单量',
          type:'bar',
          data:data.订单量
      },
      {
          name:'毛利润',
          type:'bar',
          data:data.毛利润
      }
  ]
  })
});
5.饼图展示用户支付方式占比

//支付方式占比
var payWay = echarts.init(document.getElementById('payWay'));
$.get("data/不同支付方式用户人数.json").done(function (data) {
  //data = JSON.parse(data);
payWay.setOption({
  tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
      data: data.支付方式,
      orient:'vertical',
      left:0,
      top:"25%"
  },
  grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      containLabel: true
  },
  series : [
      {
          name: '支付方式占比',
          type: 'pie',
          radius : '62%',
          center: ['65%', '50%'],
          label:{
              formatter:"{b}\n{a|{d}%}",
              rich: {
                  a: {
                      padding:6,
                      align:'left',
                      color:'#999',
                  }
              }
          },
          data:data.data,
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      }
  ]
  })
});



window.onresize = function() {
  saleM.resize();
  orderQ.resize();
  grossM.resize();
  discount.resize();
  unitP.resize();
  saleRate.resize();
  saleMtop5.resize();
  saleOrder.resize();
  payWay.resize();
};

四、库存分析大屏可视化 charts.int.js

1.簇状柱状图展示售货机商品数量
// 设备容量
var mVolume = echarts.init(document.getElementById('mVolume'));
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
	//data = JSON.parse(data),
	mVolume.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:data.类型,
        type:'scroll',
    },
    barWidth:'35%',
    barCategoryGap:'40%',
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        data: data.地点
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name:'库存总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            data:data.库存数量,
        },
        {
            type:'line',
            name:'预警线',
            connectNulls: 'true',
            data:[150,150,150,150,150],
        },
        {
            name:'缺货总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            itemStyle:{
                color:'#ca841e'
            },
            data:data.缺货数量,
        }
    ]
		})
});
2.环形图展示品类库存占比
//品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },
    series: [
        {
            name:'品类',
            type:'pie',
            radius: [0, '40%'],
            center : ['55%', '53%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data.一级商品
        },
        {
            name:'品类',
            type:'pie',
            color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
            radius: ['40%', '66%'],
            center : ['55%', '53%'],
            selectedMode: 'multiple',
            itemStyle:{
                borderWidth:'2',
                borderColor:'none'
            },
            label: {
            },
            data:data.二级商品
        }
    ]
		})
});
3.堆积条形图展示商品存销量
// 存销量
var stockSales = echarts.init(document.getElementById('stockSales'));
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    //data = JSON.parse(data),
	stockSales.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '0%',
		top:'60',
		right:'5%',
		bottom: '10',
		containLabel: true
	},
	barWidth:'45%',
	legend: {
		data:data.数量类型,
		top:'22'
	},
	xAxis: {
		type: 'value',
		min: 0,
		boundaryGap: [0, 0.01],
		axisLine:{lineStyle:{width:0}},
	},
	yAxis: {
		type: 'category',
		splitLine:{lineStyle:{width:0}},
		data: data.商品名称
	},
	series: [
		{
			name: '销售数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.销售数量
		},
		{
			name: '库存数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.库存数量
		}
	]
		})
});
4.簇状柱状-折线图展示商品的存货周转天数 
// 商品存货周转天数
var turnaround = echarts.init(document.getElementById('turnaround'));
$.get("data/各类商品存货周转天数.json").done(function (data) {
    //data = JSON.parse(data),
    turnaround.setOption({
        tooltip:{
        formatter: '{b}：{c}'
    },
    series: [{
        type: 'treemap',
        label:{
            show:true,
            position:'insideTopLeft',
            distance:0,
            padding:10,
            formatter:"{b}\n{a|{c}}",
            rich: {
                a: {
                    padding:6,
                    align:'right',
                    verticalAlign:'bottom',
                    color:'#fff',
                }
            }
        },
        roam:false,
        nodeClick:false,
        breadcrumb:{show:false},
        itemStyle:{
            gapWidth:5,
            borderColor:'transparent'
        },
        data: data.data
    }]
        })
});
5.矩形树图展示滞销商品
// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
	//data = JSON.parse(data),
	unsalable.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:data.name
    },
    barGap:'10%',
    barCategoryGap:'25%',
    xAxis: [
        {
            type: 'category',
            data: data.商品名称,
            axisPointer:{type:'shadow'},
            splitLine:{lineStyle:{width:0}},
            axisLabel:{rotate:30}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
                formatter: '{value} '
            },
            axisLine:{lineStyle:{width:0}},
            
        }
    ],
    series: [
        {
            name:'滞销金额',
            type:'bar',
            data:data.滞销金额
        },
        {
            name:'存货周转率',
            type:'line',
            yAxisIndex: 1,
            label:{
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(235,48,48,0.8)',
                verticalAlign:'middle',
                padding:[2,4,0,4],
                borderRadius:4,
                position:'inside'
            },
            data:data.存货周转率
        },
        {
            name:'库存数量',
            type:'bar',
            data:data.库存数量
        }
    ]
		})
});

代码详见charts.int.js文件：

五、用户分析可视化展示 charts.user.js

1.折线图展示近7天用户人数新增和流失趋势
// 近5日用户人数新增和流失趋势
var lossGrowth = echarts.init(document.getElementById('lossGrowth'));
$.get("data/近5日新增和流失用户数据.json").done(function (data) {
    //data = JSON.parse(data);
	lossGrowth.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            type:'scroll'
        },
        grid: {
            left: '10',
            right: '30',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.日期
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'新增人数',
                type:'line',
                data:data.新增人数,
                symbol:'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(194, 53, 49,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            },
            {
                name:'流失人数',
                type:'line',
                symbol:'circle',
                data:data.流失人数,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(47, 69, 84,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            }
        ]
	});
});
2.环形图展示用户类型人数占比
//用户类型人数
var cSorNum = echarts.init(document.getElementById('cSorNum'));
$.get("data/不同类型用户的人数.json").done(function (data) {
    //data = JSON.parse(data);
	cSorNum.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '用户类型人数',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#fff'
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});
3.簇状柱状图展示用户消费地点和消费时段
// 用户消费时段
var expTime = echarts.init(document.getElementById('expTime'));
$.get("data/用户消费时段数据.json").done(function (data) {
    //data = JSON.parse(data);
	expTime.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10',
        top:'30',
        right:'10',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'50%',
    xAxis: {
        type: 'value',
        min: 0,
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}}
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.消费时段
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle'
            },
            data: data.用户人数
        }
    ]
		})
});



// 用户消费地点
var expLoc = echarts.init(document.getElementById('expLoc'));
$.get("data/用户消费地点数据.json").done(function (data) {
    //data = JSON.parse(data),
	expLoc.setOption({
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '0',
        top:'30',
        containLabel: true
    },
    barCategoryGap:'60%',
    xAxis: [
        {
            type: 'category',
            data: data.消费地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
        }
    ],
    series: [
        {
            type:'bar',
            data:data.用户人数,
        }
    ]
		})
});
4.雷达图展示用户分群
// 用户分群
var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
    //data = JSON.parse(data);
	userGroup.setOption({
    tooltip: {},
    legend: {
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        center: ['50%', '58%'],
        splitArea: {
            areaStyle: {
                color:'transparent'
            }
        },
        axisLine: { lineStyle: {color: '#061e42' }},
        splitLine: { lineStyle: {color: '#061e42' }},
        indicator: [
           { name: '消费金额', max: 80,color:'black'},
           { name: '购买数量', max: 80,color:'black'},
           { name: '购买频率', max: 80,color:'black'},
           { name: '交易次数', max: 80,color:'black'},
           { name: '客单价', max: 80,color:'black' }
        ]
    },
    series: [{
        name: '用户分群',
        type: 'radar',
        
        areaStyle:{
            show:true,
            opacity:0.3
        },
        data : data.data
    }]
		})
});
5.气泡图展示商品价格区间
// 商品价格区间
var pInterval = echarts.init(document.getElementById('pInterval'));
pInterval.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip : {
        showDelay : 0,
        formatter : function (params) {
                return params.seriesName + '<br/>' + '单价：' + params.value[0] + '<br/>' + '销量：' + params.value[1];
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },

    legend: {
        type:'scroll',
    },
    xAxis :{ scale:true},
    yAxis :{ scale:true},
});

$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    pInterval.setOption({
        series:series
    });
});
6.字符云图展示用户画像
// 用户画像
var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
    //data = JSON.parse(data);
    var option = {
        tooltip : {
            trigger: 'item',
            formatter:function(item){
                return item.name + "：" + item.value.toFixed(2);
            }
        },
        series: [ {
            type: 'wordCloud',
            sizeRange: [10,30],
            rotationRange: [0, 0],
            rotationStep: 180,
            gridSize: 0,
            autoSize: {enable:true, minSize:5},
            shape: 'roundRect',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color:'#333',
                    shadowColor: '#ccc',
                    fontSize:20
                }
            },
            data: data.data.sort(function (a, b) {
                return b.value  - a.value;
            })
        } ]
    };
    chart.setOption(option);
});

小智张
关注
  • 19
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
无人售货机零售项目ECharts展现(最全！！)
05-13
运行即可
无人售货机Echarts数据分析
05-13
无人售货机Echarts数据分析
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
Echarts-售货机大数据分析平台
05-13
售货机大数据分析平台数据
应用实战：无人售货机零售项目ECharts展现
2301_77281478的博客
05-13 1221
2.可视化展示销售情况总分析了解无人售货机零售项目背景可视化使用到的数据表如表所示。2.可视化展示销售情况总分析。
基于Echarts实现可视化数据大屏销售大数据分析系统
qq_365392777
10-23 620
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
ECharts无人售货机
2202_75544053的博客
05-13 1235
通过在不同时间点上展示不同类别的数据，可以清晰地展示它们随时间的变化情况，帮助用户发现数据的趋势和规律。每个条形代表一个时间点或时间段，条形内部的不同颜色区域表示不同的类别，可以清晰地比较每个类别在不同时间点的数据变化情况。用于展示不同产品或不同公司在市场中的份额情况。适用于显示数据随时间、类别或其他连续变量而变化的情况，常用于趋势分析、比较不同组间的变化、关联性分析、预测未来趋势、监控和反馈以及效果评估等场景。簇状柱状图适合用于比较不同类别或不同组的数据，例如比较不同产品的销售额、不同时间段的收益等。
Echarts总结之无人售货机
2301_81685623的博客
05-13 883
一，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。一，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。二，可视化使用到的数据表。
Echarts无人售货机代码分析
2302_81169928的博客
05-13 1894
可视化使用到的数据表如表所示。无人售货机各特征数据josn售货机销售金额及销售金额增长率数据.json商品销售金额前5名.json不同地点售货机销售数据json不同支付方式用户人数json不同区域的各指标数据.json商品销售数量前10名.json商品销量数量和价格数据.json销售金额实际值与预测值.json不同地点售货机库存数量和缺货数量.json不同类型的商品库存数量.json商品库存数量和销售数量.json商品滞销数据.json。
基于Python的自动售货机销售数据可视化分析及预测
毕业作品网站
07-10 6934
销量前五的商品销量柱状图:先将时间转换为标准格式，再讲时间列换位到索引上，用户输入要绘制那一月的销量柱状图，通过循环遍历得到次月商品名单，创建等长零列表，两列表压缩成字典，依次更新字典中商品销量，根据销量对字典进行排序，获取用户画前几的柱状图，绘图。......
数据可视化echarts总结
03-23
数据可视化echarts总结
bdwl:博达物联无人售货机项目源码-项目
03-24
bdwl:博达物联无人售货机项目源码
echarts无人售货机实战演练
最新发布
05-13
echarts无人售货机实战演练
Kettle 无人售货机项目实战数据包
10-30
Kettle 无人售货机项目实战数据包
Echarts可视化数据展示大屏.rar
10-19
使用Echarts做的大数据展示大屏，所有样式设计在CSS中，有需要的可以看看，全部板块设计可进行二次开发。
python数据分析项目有趣 新零售-无人智能售货机商务数据分析
06-25
python数据分析项目有趣 新零售-无人智能售货机商务数据分析 jupter格式的html 项目背景 站点选择等是自动售货机运营者需要重点关注的问题。因此，科学的商业 数据分析能够帮助经营者了解用户需求，掌握商品需求量，...
web数据可视化实训（Echarts版）
m0_62550958的博客
07-02 953
数据可视化-售货机大数据分析平台项目实践作业
无人售货机零售项目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、付费专栏及课程。

余额充值