将该项目文件解压缩然后在VSCode中打开是下面的效果:
该项目的实现主要由inventory.html,sale.html等,共4个html文件实现,实现效果可以点击下方的项目详情进行查看:
项目详情中存在四个主要部分,下面会分别对四块部分进行介绍(注:下方数据仅作演示,并无实际意义,具体情况需具体分析):
一:“总数据”部分:
效果如下:
接下来是各小块的介绍:
上方这块运用了5个饼图,实现了对销售金额等数据的可视化
这一块使用双Y轴并同时使用柱状图和折线图,让用户可以清晰地了解9月份30天的营销情况和 每天营业额对比前一天的增减情况
这一块使用条形图让用户了解到销售金额最高的五件商品是哪五件以及销售了多少
这一块用饼图显示了顾客的付款情况,帮助了解顾客的付款习惯
这一块用堆叠柱状图将各地方的无人售货机的营销数据进行对比
二:“销售分析”部分:
效果如下:
接下来是各小块的介绍:
上方使用四个玫瑰图(南丁格尔图),实现对不同地方的无人售货机对同一数据的比较
这是对销售金额预测值和实际值的比较,让用户知道对比预期,实际销售情况如何
通过散点图对各商品的价格进行分区,是各商品的价格一目了然
这一块通过条形图,告诉用户顾客最喜欢的十个商品是哪十个 ,以及对应的销量是多少
三:“商品库存”部分:
效果如下:
下面是各小块的介绍:
这一块显示了各地方无人销售机的库存总量和缺货总量,一条预警线告诉用户什么时候需要添加商品
这是库存商品的详细介绍,通过饼图进行分类
这一块通过条形图显示各商品的销售数量和剩余数量
这一块用矩形树图显示各种类商品的周转天数
这一块用堆叠柱状图和条形图结合,显示各商品的滞销金额等数据
四:“用户分析”部分:
效果如下:
下面是各小块的介绍:
这一块通过折线图,显示新增顾客人数和流失顾客人数的变化情况
这一块通过饼图,表现各种类型的顾客占总顾客的比例
这一块通过雷达图将各种顾客的消费情况进行比对
这里用条形图,显示个时段的顾客数量
这里用词云图,将标签图片等汇总展示
这一块用柱状图,告诉用户哪里的无人售货机更多人使用
五:总结:
该项目将许多数据进行可视化并分别展示,能够帮助用户轻松地了解销售信息,帮助用户作出判断,各种图例也运用合理,恰到好处,条形图显示具体数据,折线图显示数据变化情况,饼图将数据与整体进行对比,雷达图显示多个方面的优劣,矩阵树图分块展示,词云图标签,关键词收集,散点图单个分析...同时图例间也相互结合,在一个图上显示更多信息,使整个可视化的图示更加简洁