数据图表数据分析
说明:根据demo图标列出查询条件以及数据结构,不用在意效果样式,后期功能实现完毕后可进行美化
日期:2020年11月20日
作者:谯坤
一、各个门店客单量分析
- 原型图
折线图\散点图
x轴(表示???)y轴表示(客单量?)
- api参考数据格式
{
"status": 200,
"data": [
{
"storeId": "0001",
"storeName": "旗舰店",
"storeData": [
{ "x轴(自定义名称)": "10", "y轴(客单量?)": "8000" },
{ "x轴(自定义名称)": "20", "y轴(客单量?)": "1500" },
{ "x轴(自定义名称)": "30", "y轴(客单量?)": "20" },
{ "x轴(自定义名称)": "40", "y轴(客单量?)": "10" },
{ "x轴(自定义名称)": "50", "y轴(客单量?)": "5" },
{ "x轴(自定义名称)": "60", "y轴(客单量?)": "2" },
{ "x轴(自定义名称)": "70", "y轴(客单量?)": "1" }
]
},
{
"storeId": "0002",
"storeName": "社区大卖场",
"storeData": [
{ "x轴(自定义名称)": "10", "y轴(客单量?)": "6000" },
{ "x轴(自定义名称)": "20", "y轴(客单量?)": "1200" },
{ "x轴(自定义名称)": "30", "y轴(客单量?)": "15" },
{ "x轴(自定义名称)": "40", "y轴(客单量?)": "12" },
{ "x轴(自定义名称)": "50", "y轴(客单量?)": "8" },
{ "x轴(自定义名称)": "60", "y轴(客单量?)": "6" },
{ "x轴(自定义名称)": "70", "y轴(客单量?)": "4" }
]
}
]
}
- 前端整理数据参考格式
// x轴数据
xAxis: {
data: ['10', '20', '30', '40', '50', '60', '70']
},
// y轴数据
series: [
{
name: '旗舰店',
type: 'line',
stack: '旗舰店',
smooth: true,
data: [8000, 1500, 20, 10, 5, 2, 1]
},
{
name: '社区大卖场',
type: 'line',
stack: '社区大卖场',
smooth: true,
data: [6000, 1200, 15, 12, 8, 6, 4]
},
{
name: '社区综超',
type: 'line',
stack: '社区综超',
smooth: true,
data: [7000, 1800, 18, 9, 4, 2, 1]
},
{
name: '精品超市',
type: 'line',
stack: '精品超市',
smooth: true,
data: [5000,1200 , 15, 12, 10, 9, 3]
},
{
name: '郊区超市',
type: 'line',
stack: '郊区超市',
smooth: true,
data: [6500, 1300, 10, 9, 8, 7, 6]
},
{
name: '社区精品超市',
type: 'line',
stack: '社区精品超市',
smooth: true,
data: [1200, 100, 9, 6, 5, 4, 1]
}
]
- 参考效果图(样式需要优化)
二、具体某一门店顾客单为1的商品购买频次以及重要度
- 原型图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NJ1LpKol-1606040389095)(C:\Users\86177\Desktop\数据图片截图\具体某一门店顾客单为1的商品购买频次以及重要度.png)]
分析:柱状图:x周表示:商品,y周表示销售:购买频次 和 重要度
- api参考数据格式
{
"status":200,
"data":[
{"goodname":"营养粉","saleNum(销量)":320,"important(重要度)":3.16},
{"goodname":"康师傅矿泉水","saleNum(销量)":302,"important(重要度)":2.80},
{"goodname":"女装上衣","saleNum(销量)":301,"important(重要度)":3.90},
{"goodname":"泰山(红将","saleNum(销量)":334,"important(重要度)":5.90},
{"goodname":"云烟","saleNum(销量)":390,"important(重要度)":5.00},
{"goodname":"娃哈哈","saleNum(销量)":330,"important(重要度)":6.00},
{"goodname":"南京","saleNum(销量)":320,"important(重要度)":7.00}
]
}
- 前端参考数据结构
// x轴数据
xAxis: {
data: ['营养粉', '康师傅矿泉水', '女装上衣', '泰山(红将)', '云烟', '娃哈哈', '南京']
},
// y轴数据
series: [
{
name: '销量',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '重要度',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data: [3.16, 2.80, 3.90, 5.90, 5, 6,7]
}
]
- 参考效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3JsPTPY-1606040389103)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\1605857766969.png)]
三、具体某一门店的商品关联图谱
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3HUsbDi-1606040389108)(assets/具体某一门店的商品关联图谱.png)]
分析:查询某一具体门店下的商品关系信息
- api参考格式
{
status:200,
data:{
nodes: [
{
id: '0',
name: '营养粉',
attributes: { modularity_class: 0 }
},
{ id: '1', name: '矿泉水', attributes: { modularity_class: 1 } },
{ id: '2', name: '苏打粉', attributes: { modularity_class: 2 } },
{
id: '3',
name: '可口可乐',
attributes: { modularity_class: 3 }
}
],
links: [
{ id: '0', source: '0', target: '1' },
{ id: '1', source: '0', target: '2' },
{ id: '2', source: '0', target: '3' }
]
}
}
- 前端参考数据格式
// 节点信息数据
nodes: [
{
id: '0',
name: '营养粉',
attributes: { modularity_class: 0 }
},
{ id: '1', name: '矿泉水', attributes: { modularity_class: 1 } },
{ id: '2', name: '苏打粉', attributes: { modularity_class: 2 } },
{
id: '3',
name: '可口可乐',
attributes: { modularity_class: 3 }
}
],
// 关系信息数据
links: [
{ id: '0', source: '0', target: '1' },
{ id: '1', source: '0', target: '2' },
{ id: '2', source: '0', target: '3' }
]
- 参考效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MiLGyHFn-1606040389117)(assets/1605869242143.png)]
四、销量变化原因
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEImldnn-1606040389120)(assets/销售量变化原因分析.png)]
分析:查询每一个门店的销量
- api格式参考
{
"status":200,
"data":[
{
"storeId":"0001",
"storeName":"旗舰店",
"storeSaleNum":120
},
{
"storeId":"0002",
"storeName":"精品社区",
"storeSaleNum":200
},
{
"storeId":"0003",
"storeName":"门店三",
"storeSaleNum":150
},
{
"storeId":"0004",
"storeName":"门店四",
"storeSaleNum":80
},
{
"storeId":"0005",
"storeName":"门店五",
"storeSaleNum":70
},
{
"storeId":"0006",
"storeName":"门店六",
"storeSaleNum":110
},
{
"storeId":"0007",
"storeName":"门店七",
"storeSaleNum":130
}
]
}
- 前端参考数据格式
option = {
xAxis: {
type: 'category',
data: ['旗舰店', '精品社区', '门店三', '门店四', '门店五', '门店六', '门店八']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
- 效果参考图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azyXxdOi-1606040389124)(assets/1605946109943.png)]
五、门店日期折线图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxKa4qun-1606040389129)(assets/门店日期折线图.png)]
分析:查询某一门店具体日期销售数据折线图
- api数据接口格式参考
{
"status":200,
"data":[
["2020-01-01",116],
["2020-01-02",117],
["2020-01-03",114],
["2020-01-04",118],
["2020-01-05",119]
...
['2020-12-31',110]
]
}
- 前端参考数据格式
// x轴数据
xAxis: {
data: ['2020-01-01', '2020-01-02', '2020-01-02', '2020-01-02', ..., '2020-12-31']
},
// y轴数据
series: [
data: [116, 117,...,110]
]
- 效果参考图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbRN2sVd-1606040389137)(assets/1605947910324.png)]
六、门店日期品类热力图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCeNQmxl-1606040389142)(assets/门店日期品类热力图.png)]
分析:根据日期查询商品分类销量情况
- api参考数据结构
{
"status":200,
"data":{
"date":[2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06'],
"category":['换购', '家电', '日用',
'水果', '蔬菜','体育'],
"data":[[0,0,2],[0,1,2],[0,2,1],[0,3,3],[0,4,6],[0,5,0],[0,6,7],[5,1,2],[5,2,1],[4,3,8]]
}
}
- 前端参考数据说明
var hours = [
'2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06'];
var days = ['换购', '家电', '日用',
'水果', '蔬菜','体育'];
// data中数据说明
[0,0,2]0表示y轴第一个,表示x轴第一个,2表示该处的值为2
[0,1,2]0表示y轴第一个,1表示x轴第二个,2表示该位置的值,为2
通俗来讲,前面两个数表示坐标位置,第三个数表示值,第一个数表示y轴,第二个数表示x轴,第三个数表示值
var data = [[0,0,2],[0,1,2],[0,2,1],[0,3,3],[0,4,6],[0,5,0],[0,6,7],[5,1,2],[5,2,1],[4,3,8]]
- 效果参考实现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUpM7mnO-1606040389148)(assets/1605949550829.png)]