2025年无人售货机零售项目Echarts展现

大家好，我是讯享网，很高兴认识大家。

一、了解无人售货机零售项目背景

二、整体划分

三、了解无人机售货数据情况

四、绘制（簇状柱状-折线图）展示销售金额变化趋势（销售情况）

完整代码（charts.total.js)

五、绘制（汽泡图）展示商品价格区间（销售分析）

完整代码(charts.sale.js）

六、绘制（环形图）展示品类库存占比（库存分析）

完整代码(charts.int.js)

七、绘制（雷达图）

展示用户分群（用户分析）

完整代码（charts.user.js)

一、了解无人售货机零售项目背景

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

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

讯享网

二、整体划分

整体划分为四个方面(以后从四个方面里各选一个分析）：

1，销售情况

2，销售分析

3，库存分析

4，用户分析

可视化展示销售情况总分析可视化展示销售情况总分析

三、了解无人机售货数据情况

可视化使用到的数据表如表所示。

四、绘制（簇状柱状-折线图）展示销售金额变化趋势（销售情况）

2019年9月的售货机销售金额及其环比增长率的部分数据如表所示。

使用簇状柱状-折线图对2019年9月的售货机销售金额和销售金额环比增长率进行展示

代码如下

//销售金额变化趋势 //初始化图表 var saleRate = echarts.init(document.getElementById('saleRate')); //设置图表option值 $.get("data/售货机销售金额及其环比增长率.json").done(function (data) { //data = JSON.parse(data); saleRate.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { //用网格定位图表四边留空及顶部避开标题位置 x: 10, y: 50, x2: 10, y2: 10, //使坐标轴数据能完整显示 containLabel: true }, //设置legend位置及数据，位于图表右上方 legend: { data:['销售金额','销售金额环比增长率'], top: 10 }, barCategoryGap:'40%', xAxis: [ { type: 'category', //日期数据 data: data.日期, axisPointer: { type: 'shadow' }, //运用eCharts内置方法格式化日期，使x轴日期数据更简洁，同时不影响原数据在鼠标交互时的完整展现 axisLabel: { formatter: function(value){ return echarts.format.formatTime('dd', value); } } } ], yAxis: [ { type: 'value', name: '销售金额（元）', //设置Y坐标轴最小值 min: 0, //设置Y坐标轴最大值 max: 15000, //设置Y坐标轴值间隔值 interval: 5000 }, //定义Y轴右侧坐标轴 { type: 'value', name: '环比增长率（%）', min: -0.5, max: 1, interval: 0.5 } ], series: [ { name:'销售金额', type:'bar', //设置显示坐标点数值 label:{ show:'true' }, //销售金额数据 data:data.销售金额 }, { name:'销售金额环比增长率', type:'line', //设置“销售金额环比增长率”数值样式,圆角矩形黑底白字，位于数据点上方 label:{ //设置显示坐标点数值 show:'true', color:'#fff', backgroundColor:'rgba(0,0,0,0.7)', verticalAlign:'middle', padding:4, borderRadius:4, position:'top' }, //设置“销售金额环比增长率”在坐标轴右侧显示 yAxisIndex: 1, //销售金额环比增长率数据 data:data.销售金额环比增长率 } ] }) });

讯享网

由图可以看出，每日销售金额最低为3850元，最高为14568元，平均每天的销售额在5000元以上。每日销售金额环比增长率波动幅度较大。

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

2025年无人售货机零售项目Echarts展现

一、了解无人售货机零售项目背景

二、整体划分

三、了解无人机售货数据情况

四、绘制（簇状柱状-折线图）展示销售金额变化趋势（销售情况）

相关推荐