2023 年电商数据可视化训练
接口文档
获取时间区间内的订单数据
http请求方式：POST
请求地址：
http://IP:8999/dataVisualization/selectOrderInfo请求参数：
| 字段 | 说明 | 类型 | 是否必填 |
|---|---|---|---|
| startTime | 开始时间 | String | 是 |
| endTime | 结束时间 | String | 是 |
请求格式：
{
"startTime":"2020-01-01 00:00:00",
"endTime":"2020-12-30 00:00:00"
}返回参数：
id : 主键
finalTotalAmount ：总金额
outTradeNo ：订单交易编号（第三方支付用)
provinceName ：省名称
regionName ：地区名称
userName : 用户名 请求成功:
{
"msg": "操作成功",
"code": 200,
"data": [
{
"id": 78506,
"finalTotalAmount": 305062.00,
"outTradeNo": "756847726439369",
"provinceName": "北京",
"regionName": "华北",
"userName": "华馥"
},
{
"id": 78559,
"finalTotalAmount": 6111.00,
"outTradeNo": "341957455961748",
"provinceName": "北京",
"regionName": "华北",
"userName": "罗菊兰"
},
{
"id": 78568,
"finalTotalAmount": 84610.00,
"outTradeNo": "489992944636772",
"provinceName": "北京",
"regionName": "华北",
"userName": "毛岚"
},
…
]
}
查询每年上架的商品
http请求方式：POST
请求地址：
http://IP:8999/dataVisualization/selectGoodsInfo请求参数:
| 字段 | 说明 | 类型 | 是否必填 |
|---|---|---|---|
| 无 | - | - | - |
返回参数：
id : 编号
price ：总金额
skuName ：商品名称
year ：年份 请求成功：
{
"msg": "操作成功",
"code": 200,
"data": [
{
"id": 1,
"price": 2220,
"skuName": "荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机 双卡双待",
"year": "2019"
},
{
"id": 2,
"price": 3321,
"skuName": "TCL 55A950C 55英寸32核人工智能 HDR曲面超薄4K电视金属机身（枪色）",
"year": "2019"
},
{
"id": 3,
"price": 3100,
"skuName": "小米（MI）电视 55英寸曲面4K智能WiFi网络液晶电视机4S L55M5-AQ 小米电视4S 55英寸 曲面",
"year": "2019"
},
...
]
}前置
这里定义了一个 request 方法来获取数据数据
async request(callback){
var _this = this;
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"startTime": "2020-01-01 00:00:00",
"endTime": "2020-12-30 00:00:00"
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
await fetch("http://localhost:3000/api/dataVisualization/selectOrderInfo", requestOptions)
.then(response => response.json())
.then(result => {
_this.OrderInfo = result["data"]
})
.catch(error => console.log('error', error));
await fetch("http://localhost:3000/api/dataVisualization/selectGoodsInfo", requestOptions)
.then(response => response.json())
.then(result => {
_this.GoodsInfo = result["data"]
})
.catch(error => console.log('error', error));
}题目
任务一：用柱状图展示消费额最高的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task1(){
var pc = echarts.init(document.getElementsByClassName("ec")[0])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["provinceName"])
if(index == -1){
ls.push(ele["provinceName"])
data.push({
provinceName:ele["provinceName"],
finalTotalAmount:ele["finalTotalAmount"]
})
}else{
data[index]["finalTotalAmount"] += ele["finalTotalAmount"]
}
})
let top5 = data.sort((a,b)=>b["finalTotalAmount"]-a["finalTotalAmount"]).slice(0,5)
let abb = [[],[]]
top5.forEach(res=>{
abb[0].push(res["provinceName"])
abb[1].push(res["finalTotalAmount"])
})
console.log("===========第一题==========")
console.log(abb[0])
console.log(abb[1])
var option = {
title:{
text:"任务一：用柱状图展示消费额最高的省份"
},
xAxis:{
data:abb[0]
},
yAxis:{},
series:[
{
type:"bar",
data:abb[1]
}
]
}
pc.setOption(option)
},结果
任务二：用饼状图展示各地区消费能力
编写Vue工程代码，根据接口，用饼状图展示2020年各地区的消费总额占比，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task2(){
var pc = echarts.init(document.getElementsByClassName("ec")[1])
var ls = []
var data = []
var total = 0
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["regionName"])
if(index == -1){
ls.push(ele["regionName"])
data.push({
name:ele["regionName"],
value:ele["finalTotalAmount"]
})
total += ele["finalTotalAmount"]
}else{
data[index]["value"] += ele["finalTotalAmount"]
total += ele["finalTotalAmount"]
}
})
data.forEach((item,key)=>{
data[key]["value"] = data[key]["value"] / total * 100
})
console.log("===========第二题==========")
console.log(data)
var option = {
title:{
text:"任务二：用饼状图展示各地区消费能力"
},
series:[
{
type:"pie",
data:data
}
]
}
pc.setOption(option)
},结果
任务三：用散点图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用基础散点图展示每年上架商品数量的变化情况，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task3(){
var pc = echarts.init(document.getElementsByClassName("ec")[2])
var ls = []
var data = []
this.GoodsInfo.forEach(ele=>{
var index = ls.indexOf(ele["year"])
if(index == -1){
ls.push(ele["year"]);
data.push([ele["year"],1]);
}else{
data[index][1] += 1;
}
})
console.log("===========第三题==========")
console.log(data)
var option = {
title:{
text:"任务三：用散点图展示每年上架商品数量的变化"
},
xAxis:{type:"value",name: '年份',min:2000},
yAxis:{type:"value",name: '数量',},
series:[
{
symbolSize: (size)=>{
if(size[1]<1000){
return 20
}else{
return size[1] *= 0.009
}
},
type:"scatter",
data:data
}
]
}
pc.setOption(option)
},结果
任务四：用条形图展示平均消费额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task4(){
var pc = echarts.init(document.getElementsByClassName("ec")[3])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["provinceName"])
if(index == -1){
ls.push(ele["provinceName"]);
data.push([ele["provinceName"],ele["finalTotalAmount"],1]);
}else{
data[index][2] += 1;
data[index][1] += ele["finalTotalAmount"];
}
})
var li = []
data.forEach(it=>{
li.push([it[0],(it[1]/it[2]).toFixed(2)*1])
})
var als = [[],[]]
li.sort((a,b)=>b[1]-a[1])
li.slice(0,5).forEach(it=>{
als[0].push(it[0])
als[1].push(it[1])
})
console.log("===========第四题==========")
console.log(als[0])
console.log(als[1])
var option = {
title:{
text:"任务四：用条形图展示平均消费额最高的省份"
},
xAxis:{type:"value"},
yAxis:{data:als[0]},
series:[
{
type:"bar",
data:als[1]
}
]
}
pc.setOption(option)
},结果
任务五：用折柱混合图展示省份平均消费额和地区平均消费额
编写Vue工程代码，根据接口，用折柱混合图展示2020年各省份平均消费额（四舍五入保留两位小数）和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task5(){
var pc = echarts.init(document.getElementsByClassName("ec")[4])
var ls = []
var data = []
// 省份平均消费额
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["provinceName"])
if(index == -1){
ls.push(ele["provinceName"]);
data.push([ele["provinceName"],ele["finalTotalAmount"],1,ele["regionName"]]);
}else{
data[index][2] += 1;
data[index][1] += ele["finalTotalAmount"];
}
})
var li = []
data.forEach(it=>{
li.push([it[0],(it[1]/it[2]).toFixed(2)*1,it[3]])
})
var als = [[],[],[]]
li.sort((a,b)=>b[1]-a[1])
li.slice(0,5).forEach(it=>{
als[0].push(it[0])
als[1].push(it[1])
als[2].push(it[2])
})
// 地区平均消费额
var a1 = []
var a2 = {}
this.OrderInfo.forEach(ele=>{
var index = a1.indexOf(ele["regionName"])
if(index == -1){
a1.push(ele["regionName"])
a2[ele["regionName"]] = {
finalTotalAmount:ele["finalTotalAmount"],
total:1
}
}else{
a2[ele["regionName"]]["finalTotalAmount"] += ele["finalTotalAmount"]
a2[ele["regionName"]]["total"] += 1
}
})
let a3 = []
als[2].forEach(res=>{
a3.push((a2[res]["finalTotalAmount"] / a2[res]["total"]).toFixed(2)*1)
})
console.log("===========第五题==========")
console.log(als[0])
console.log(als[1])
console.log(a3)
var option = {
title:{
text:"任务五：用折柱混合图展示省份平均消费额和地区平均消费额"
},
xAxis:{data:als[0]},
yAxis:{type:"value"},
series:[
{
type:"bar",
data:als[1]
},
{
type:"line",
data:a3
},
]
}
pc.setOption(option)
},结果
任务六：用折线图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用折线图展示每年上架商品数量的变化情况，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task6(){
var pc = echarts.init(document.getElementsByClassName("ec")[5])
var ls = []
var data = []
this.GoodsInfo.forEach(ele=>{
var index = ls.indexOf(ele["year"])
if(index == -1){
ls.push(ele["year"]);
data.push(1);
}else{
data[index] += 1;
}
})
console.log("===========第六题==========")
console.log(ls)
console.log(data)
var option = {
title:{
text:"任务六：用折线图展示每年上架商品数量的变化"
},
xAxis:{data:ls},
yAxis:{type:"value"},
series:[
{
type:"line",
data:data
}
]
}
pc.setOption(option)
},结果
任务七：用条形图展示消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年消费额最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task7(){
var pc = echarts.init(document.getElementsByClassName("ec")[6])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["regionName"])
if(index == -1){
ls.push(ele["regionName"]);
data.push({
name:ele["regionName"],
value:ele["finalTotalAmount"]
});
}else{
data[index]["value"] += ele["finalTotalAmount"];
}
})
data.sort((a,b)=>b["value"] - a["value"])
var a1 = [[],[]]
data.slice(0,5).forEach(res=>{
a1[0].push(res["name"])
a1[1].push(res["value"])
})
console.log("===========第七题==========")
console.log(a1[0])
console.log(a1[1])
var option = {
title:{
text:"任务七：用条形图展示消费额最高的地区"
},
xAxis:{type:"value"},
yAxis:{data:a1[0]},
series:[
{
type:"bar",
data:a1[1]
}
]
}
pc.setOption(option)
},结果
任务八：用散点图展示省份平均消费额
编写Vue工程代码，根据接口，用基础散点图展示2020年最高10个省份平均消费额（四舍五入保留两位小数），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task8(){
var pc = echarts.init(document.getElementsByClassName("ec")[7])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["provinceName"])
if(index == -1){
ls.push(ele["provinceName"]);
data.push({
name:ele["provinceName"],
value:ele["finalTotalAmount"],
total:1
});
}else{
data[index]["value"] += ele["finalTotalAmount"];
data[index]["total"] += 1;
}
})
data.sort((a,b)=>b["value"] - a["value"])
var a1 = []
data.forEach(res=>{
a1.push([res["name"],(res["value"]/res["total"]).toFixed(2)*1])
})
a1.sort((a,b)=>b[1]-a[1])
var a2 = [[],[]]
a1.forEach(re=>{
a2[0].push(re[0])
a2[1].push(re[1])
})
console.log("===========第八题==========")
console.log(a2[0].slice(0,10))
console.log(a2[1].slice(0,10))
var option = {
title:{
text:"任务八：用散点图展示省份平均消费额"
},
xAxis:{data:a2[0].slice(0,10)},
yAxis:{type:"value"},
series:[
{
symbolSize:20,
type:"scatter",
data:a2[1].slice(0,10)
}
]
}
pc.setOption(option)
},
结果
任务九：用柱状图展示消费额最高的地区
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task9(){
var pc = echarts.init(document.getElementsByClassName("ec")[8])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["regionName"])
if(index == -1){
ls.push(ele["regionName"]);
data.push({
name:ele["regionName"],
value:ele["finalTotalAmount"]
});
}else{
data[index]["value"] += ele["finalTotalAmount"];
}
})
data.sort((a,b)=>b["value"] - a["value"])
var a1 = [[],[]]
data.slice(0,5).forEach(res=>{
a1[0].push(res["name"])
a1[1].push(res["value"])
})
console.log("===========第九题==========")
console.log(a1[0])
console.log(a1[1])
var option = {
title:{
text:"任务九：用柱状图展示消费额最高的地区"
},
xAxis:{data:a1[0]},
yAxis:{type:"value"},
series:[
{
symbolSize:20,
type:"bar",
data:a1[1]
}
]
}
pc.setOption(option)
},
结果
任务十：用条形图展示平均消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task10(){
var pc = echarts.init(document.getElementsByClassName("ec")[9])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["regionName"])
if(index == -1){
ls.push(ele["regionName"]);
data.push({
name:ele["regionName"],
value:ele["finalTotalAmount"],
total:1
});
}else{
data[index]["value"] += ele["finalTotalAmount"];
data[index]["total"] += 1;
}
})
var a1 = []
data.forEach(res=>{
a1.push({
name:res["name"],
avg:(res["value"] /res["total"]).toFixed(2)*1
})
})
a1.sort((a,b)=>b["avg"] - a["avg"])
var a2 = [[],[]]
a1.forEach(res=>{
a2[0].push(res["name"])
a2[1].push(res["avg"])
})
console.log("===========第十题==========")
console.log(a2[0].slice(0,5))
console.log(a2[1].slice(0,5))
var option = {
title:{
text:"任务十：用条形图展示平均消费额最高的地区"
},
xAxis:{type:"value"},
yAxis:{data:a2[0].slice(0,5)},
series:[
{
symbolSize:20,
type:"bar",
data:a2[1].slice(0,5)
}
]
}
pc.setOption(option)
},
结果
任务十一：用柱状图展示消费额最高的用户
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个用户，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task11(){
var pc = echarts.init(document.getElementsByClassName("ec")[10])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["userName"])
if(ele["userName"] != null){
if(index == -1){
ls.push(ele["userName"]);
data.push({
name:ele["userName"],
value:ele["finalTotalAmount"]
});
}else{
data[index]["value"] += ele["finalTotalAmount"];
}
}
})
data = data.sort((a,b)=>b["value"]-a["value"]).slice(0,5)
var l = [[],[]]
data.forEach(res=>{
l[0].push(res["name"])
l[1].push(res["value"])
})
console.log("===========第十一题==========")
console.log(l[0])
console.log(l[1])
var option = {
title:{
text:"任务十一：用柱状图展示消费额最高的用户"
},
xAxis:{data:l[0]},
yAxis:{type:"value"},
series:[
{
symbolSize:20,
type:"bar",
data:l[1]
}
]
}
pc.setOption(option)
},
结果
任务十二：用玫瑰图展示各地区消费能力
编写Vue工程代码，根据接口，用基础南丁格尔玫瑰图展示2020年各地区的消费总额占比，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task12(){
var pc = echarts.init(document.getElementsByClassName("ec")[11])
var ls = []
var data = []
var total = 0
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["regionName"])
if(index == -1){
ls.push(ele["regionName"])
data.push({
name:ele["regionName"],
value:ele["finalTotalAmount"]
})
total += ele["finalTotalAmount"]
}else{
data[index]["value"] += ele["finalTotalAmount"]
total += ele["finalTotalAmount"]
}
})
data.forEach((item,key)=>{
data[key]["value"] = data[key]["value"] / total * 100
})
console.log("===========第十二题==========")
console.log(data)
var option = {
title:{
text:"任务十二：用玫瑰图展示各地区消费能力"
},
series:[
{
symbolSize:20,
type:"pie",
roseType: 'radius',
data:data
}
]
}
pc.setOption(option)
},
结果
任务十三：用条形图展示消费总额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年消费总额最高的10个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码
task13(){
var pc = echarts.init(document.getElementsByClassName("ec")[12])
var ls = []
var data = []
this.OrderInfo.forEach(ele=>{
var index = ls.indexOf(ele["provinceName"])
if(index == -1){
ls.push(ele["provinceName"])
data.push({
name:ele["provinceName"],
value:ele["finalTotalAmount"]
})
}else{
data[index]["value"] += ele["finalTotalAmount"]
}
})
data = data.sort((a,b)=>b["value"]-a["value"]).slice(0,10)
var a1 = [[],[]]
data.forEach(res=>{
a1[0].push(res["name"])
a1[1].push(res["value"])
})
console.log("===========第十三题==========")
console.log(a1[0])
console.log(a1[1])
var option = {
title:{
text:"任务十三：用条形图展示消费总额最高的省份"
},
xAxis:{type:"value"},
yAxis:{data:a1[0]},
series:[
{
type:"bar",
data:a1[1]
}
]
}
pc.setOption(option)
},
结果
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »