接口文档获取时间区间内的订单数据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) }, 结果