介绍
此项目基于vue3，结合echarts获取接口数据进行数据可视化
使用Postman接口测试工具，来获取相关数据，导出为json格式的数据作为可视化数据源
任务一：用柱状图展示消费额最高的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from '../../echarts.min.js';
import data from '../../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份总销售额
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalRevenue = curr.finalTotalAmount;
return acc;
}, {});
// 将 provinceData 转换为数组
var provinceArray = Object.entries(provinceData).map(([key, value]) => ({
provinceName:
key, finalTotalAmount: value.provincetotalRevenue
}));
// 获取前五
var Top5provincedata = provinceArray.sort((a, b) => b.finalTotalAmount -
a.finalTotalAmount).slice(0, 5)
// 获取数据
var province = Top5provincedata.map(item => item.provinceName).slice(0, 5)
var totalamount = Top5provincedata.map(item =>
item.finalTotalAmount).slice(0, 5)
// 打印结果
console.log("省份", province)
console.log("销售额", totalamount)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: {
data: totalamount,
type: 'bar',
label: {
show: true,
position: 'top'
}
},
title: {
text: "2020年消费额最高的5个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务二：用饼状图展示各地区消费能力
编写Vue工程代码，根据接口，用饼状图展示2020年各地区的消费总额占比，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算地区消费额
const regiondata = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalRevence: 0
}
}
acc[curr.regionName].totalRevence = curr.finalTotalAmount
return acc;
}, {});
// 转换数据类型
var result = Object.entries(regiondata).map(([name, value]) => ({
value:
value.totalRevence, name
}))
var resultdata = {}
for (let i = 0; i < result.length; i ) {
var test = result[i].name " => " result[i].value
resultdata[i] = test;
}
console.log(resultdata)
let option = {
series: [{
type: "pie",
data: result,
label: {
show: true,
position: "outside",
}
}],
title: {
text: "2020年各地区的消费总额占比",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务三：用散点图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用基础散点图展示每年上架商品数量的变化情况，同时将用于图表展示
的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图
并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response02.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let productData = data.data;
// 计算每年上架商品数量
const productCountByYear = productData.reduce((acc, curr) => {
if (!acc[curr.year]) {
acc[curr.year] = 0;
}
acc[curr.year] ;
return acc;
}, {});
// 将 productCountByYear 转换为数组
const productCountArray = Object.entries(productCountByYear).map(([year,
count]) => ({ year, count }));
// 获取数据
var years = productCountArray.map(item => item.year);
var counts = productCountArray.map(item => item.count);
// 打印结果
console.log("年份", years)
console.log("数量", counts)
let option = {
xAxis: { data: years, type: 'category' },
yAxis: { type: 'value' },
series: [{
data: counts,
type: 'scatter',
label: { show: true, position: 'top' }
}],
title: {
text: "每年上架商品数量的变化",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务四：用条形图展示平均消费额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个
省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器
console打印结果分别截图并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份总销售额
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0,
orderCount: 0
};
}
acc[curr.provinceName].provincetotalRevenue = curr.finalTotalAmount;
acc[curr.provinceName].orderCount = 1;
return acc;
}, {});
// 将 provinceData 转换为数组
var provinceArray = Object.entries(provinceData).map(([key, value]) => ({
provinceName: key,
totalRevenue: value.provincetotalRevenue,
orderCount: value.orderCount
}));
// 计算平均消费额
provinceArray.forEach(item => {
item.avgRevenue = item.totalRevenue / item.orderCount;
});
// 获取前五省份数据
var Top5provincedata = provinceArray.sort((a, b) => b.avgRevenue -
a.avgRevenue).slice(0, 5);
var Top5provinceName = Top5provincedata.map(item => item.provinceName);
var avgprovincedata = Top5provincedata.map(item =>
item.avgRevenue.toFixed(2));
// 打印结果
console.log("省份", Top5provinceName)
console.log("消费额", avgprovincedata)
let option = {
xAxis: { type: 'value' },
yAxis: { data: Top5provinceName, type: 'category' },
series: {
data: avgprovincedata, type: 'bar', label: {
show: true,
position: 'right'
}
},
title: {
text: "2020年平均消费额最高的5个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务五：用折柱混合图展示省份平均消费额和地区平均消费额
编写Vue工程代码，根据接口，用折柱混合图展示2020年各省份平均消费额（四舍五入保留两位小数）
和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线
图展示这5个省所在的地区的平均消费额变化，同时将用于图表展示的数据结构在浏览器的console中进
行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算省份总销售额
var avgprovinceRevenue = downlog.reduce((acc, item) => {
if (acc[item.provinceName]) {
acc[item.provinceName].totalRevenue = item.finalTotalAmount;
acc[item.provinceName].orderCount = 1;
} else {
acc[item.provinceName] = {
totalRevenue: item.finalTotalAmount,
orderCount: 1
};
}
return acc;
}, {});
// 计算平均销售额
var avgprovinceData = Object.entries(avgprovinceRevenue).map(entry => ({
provinceName: entry[0],
avgRevenue: (entry[1].totalRevenue / entry[1].orderCount).toFixed(2)
}));
// 对平均销售额进行排序
var sortedAvgProvinceData = avgprovinceData.sort((a, b) => b.avgRevenue -
a.avgRevenue).slice(0, 5);
var Top5provinceArr = sortedAvgProvinceData.map(entry =>
entry.provinceName);
var resultavgprovinceRevenue = sortedAvgProvinceData.map(entry =>
entry.avgRevenue);
// 计算各地区平均销售额
var regionData = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalRevenue: 0,
orderCount: 0
};
}
acc[curr.regionName].totalRevenue = curr.finalTotalAmount;
acc[curr.regionName].orderCount = 1;
return acc;
}, {});
// 获取地区
var regionArr = Top5provinceArr.map(provinceName => {
var regionName = downlog.find(item => item.provinceName ===
provinceName).regionName;
return regionName;
});
// 计算地区平均值
var avgregionRevenue = regionArr.map(regionName => {
var avg = regionData[regionName].totalRevenue /
regionData[regionName].orderCount;
return avg.toFixed(2);
});
// 打印结果
console.log("省份", Top5provinceArr)
console.log("省份消费额", resultavgprovinceRevenue)
console.log("地区", regionArr)
console.log("地区消费额", avgregionRevenue)
let option = {
xAxis: [
{
type: 'category', name: "省份", data: Top5provinceArr, position:
"bottom"
},
{ type: 'category', name: "地区", data: regionArr }
],
yAxis: { type: 'value' },
series: [
{
name: '省份平均消费额', data: resultavgprovinceRevenue, type: 'bar',
label: {
show: true, position: 'top'
}
},
{
name: '地区平均消费额', data: avgregionRevenue, type: 'line', label: {
show: true, position: 'top'
}
}
],
title: {
text: "省份平均消费额和地区平均消费额",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
}
}
</script>结果展示
任务六：用折线图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用折线图展示每年上架商品数量的变化情况，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response02.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let productData = data.data;
// 计算每年上架商品数量
const productCountByYear = productData.reduce((acc, curr) => {
if (!acc[curr.year]) {
acc[curr.year] = 0;
}
acc[curr.year] ;
return acc;
}, {});
// 将 productCountByYear 转换为数组
const productCountArray = Object.entries(productCountByYear).map(([year,
count]) => ({ year, count }));
// 获取数据
var years = productCountArray.map(item => item.year);
var counts = productCountArray.map(item => item.count);
// 打印结果
console.log("年份", years)
console.log("数量", counts)
let option = {
xAxis: { data: years, type: 'category' },
yAxis: { type: 'value' },
series: [{
data: counts,
type: 'line',
label: { show: true, position: 'top' }
}],
title: {
text: "每年上架商品数量的变化",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务七：用条形图展示消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年消费额最高的5个地区，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 获取地区总消费额
var regionTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalrevenue: 0,
ordercount: 0
}
}
acc[curr.regionName].totalrevenue = curr.finalTotalAmount,
acc[curr.regionName].ordercount
return acc
}, {})
// 转换数据类型
var result = Object.entries(regionTotalRevenue).map(([key, value]) =>
({
regionName: key,
finalTotalAmount: value.totalrevenue
}))
// 获取前五
var Top5regiondata = result.sort((a, b) => b.finalTotalAmount -
a.finalTotalAmount).slice(0, 5)
// 获取数据
var region = Top5regiondata.map(item => item.regionName)
var totalamount = Top5regiondata.map(item => item.finalTotalAmount)
// 打印结果
console.log("地区", region)
console.log("消费额", totalamount)
let option = {
yAxis: { data: region, type: 'category' },
xAxis: { type: 'value' },
series: {
data: totalamount,
type: 'bar',
label: {
show: true,
position: 'right'
}
},
title: {
text: "2020年消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务八：用散点图展示省份平均消费额
编写Vue工程代码，根据接口，用基础散点图展示2020年最高10个省份平均消费额（四舍五入保留两位
小数），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览
器console打印结果分别截图并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份总销售额
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalOrders: 0,
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalOrders ; // 每次订单累加1
acc[curr.provinceName].provincetotalRevenue = curr.finalTotalAmount;
return acc;
}, {});
// 将 provinceData 转换为数组
var provinceArr = Object.entries(provinceData).map(([key, value]) => ({
provinceName: key,
finalTotalAmount: value.provincetotalRevenue,
totalOrders: value.provincetotalOrders
}));
// 计算平均销售额并按照平均销售额排序
var provinceAvgRevenue = provinceArr.map(item => ({
provinceName: item.provinceName,
avgRevenue: (item.finalTotalAmount / item.totalOrders).toFixed(2)
})).sort((a, b) => b.avgRevenue - a.avgRevenue).slice(0, 10);
// 获取前十个省份的名称和平均销售额
var top10ProvinceNames = provinceAvgRevenue.map(item =>
item.provinceName);
var top10AvgRevenue = provinceAvgRevenue.map(item => item.avgRevenue);
// 打印结果
console.log("省份", top10ProvinceNames)
console.log("消费额", top10AvgRevenue)
// 设置echarts图表的选项
let option = {
xAxis: { type: 'category', data: top10ProvinceNames },
yAxis: {
type: 'value'
},
series: [{
type: "scatter", symbolSize: 20,
data: top10AvgRevenue.map((revenue, index) =>
[top10ProvinceNames[index], revenue])
}],
title: {
text: "2020年最高10个省份平均消费额",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
}
}
</script>结果展示
任务九：用柱状图展示消费额最高的地区
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个地区，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算地区消费额
const regiondata = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalRevence: 0
}
}
acc[curr.regionName].totalRevence = curr.finalTotalAmount
return acc;
}, {});
// 将 regiondata 转换为数组
const regionArray = Object.entries(regiondata).map(([region, data]) => ({
region, totalRevence: data.totalRevence
}));
// 获取前五消费额地区
var Top5region = regionArray.sort((a, b) => b.totalRevence -
a.totalRevence).slice(0, 5)
// 获取数据
var province = Top5region.map(item => item.region)
var revence = Top5region.map(item => item.totalRevence)
// 打印结果
console.log("省份", province)
console.log("消费额", revence)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: {
data: revence,
type: 'bar',
label: { show: true, position: 'top' }
},
title: {
text: "2020年消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十：用条形图展示平均消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个
地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器
console打印结果分别截图并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算地区消费额
const regiondata = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalRevence: 0,
orderCount: 0
}
}
acc[curr.regionName].totalRevence = curr.finalTotalAmount
acc[curr.regionName].orderCount = 1
return acc;
}, {});
// 将 regiondata 转换为数组
const regionArray = Object.entries(regiondata).map(([region, data]) => ({
region,
totalRevence: data.totalRevence,
orderCount: data.orderCount
}));
// 计算平均消费额
regionArray.forEach(item => {
item.avgRevence = (item.totalRevence / item.orderCount).toFixed(2);
});
// 获取前五消费额地区
var Top5region = regionArray.sort((a, b) => b.avgRevence -
a.avgRevence).slice(0, 5)
// 获取数据
var regionNames = Top5region.map(item => item.region)
var avgRevenceData = Top5region.map(item => item.avgRevence)
// 打印结果
console.log("地区", regionNames)
console.log("消费额", avgRevenceData)
let option = {
yAxis: { data: regionNames, type: 'category' },
xAxis: { type: 'value' },
series: {
data: avgRevenceData,
type: 'bar',
label: { show: true, position: 'right' }
},
title: {
text: "2020年平均消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十一：用柱状图展示消费额最高的用户
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个用户，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById('main'));
let downlog = data.data;
// 对用户进行统计
let userMap = downlog.reduce((map, item) => {
if (!item.userName) {
// 用户名为null，不进行处理
return map;
}
if (map[item.userName]) {
// 如果已经存在该用户，则将消费总额叠加
map[item.userName] = item.finalTotalAmount;
} else {
// 如果不存在该用户，则初始化用户的消费总额
map[item.userName] = item.finalTotalAmount;
}
return map;
}, {});
// 将用户消费总额转换成数组
let userList = Object.entries(userMap).map(([key, value]) =>
({
userName: key,
finalTotalAmount: value
}));
// 将用户按照消费总额从大到小排序
let top5Users = userList.sort((a, b) => b.finalTotalAmount -
a.finalTotalAmount).slice(0, 5);
// 获取数据
let userName = top5Users.map(item => item.userName);
let finalTotalAmount = top5Users.map(item => item.finalTotalAmount);
// 打印结果
console.log("用户", userName)
console.log("消费额", finalTotalAmount)
let option = {
xAxis: { data: userName, type: 'category' },
yAxis: { type: 'value' },
series: {
data: finalTotalAmount,
type: 'bar',
label: { show: true, position: 'top' },
},
title: {
text: "2020年消费额最高的5个用户",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十二：用玫瑰图展示各地区消费能力
编写Vue工程代码，根据接口，用基础南丁格尔玫瑰图展示2020年各地区的消费总额占比，同时将用于
图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果
分别截图并粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算地区消费额
const regiondata = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalRevence: 0
}
}
acc[curr.regionName].totalRevence = curr.finalTotalAmount
return acc;
}, {});
// 转换数据类型
var result = Object.entries(regiondata).map(([name, value]) => ({
value:
value.totalRevence, name
}))
var resultdata = {}
for (let i = 0; i < result.length; i ) {
var test = result[i].name " => " result[i].value
resultdata[i] = test;
}
console.log(resultdata)
let option = {
series: [{
type: "pie",
data: result,
label: {
show: true,
position: "outside",
},
roseType: 'area'
}],
title: {
text: "2020年各地区的消费总额占比",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十三：用条形图展示消费总额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年消费总额最高的10个省份，同时将用于图表展示的
数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并
粘贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份总销售额
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalRevenue = curr.finalTotalAmount;
return acc;
}, {});
// 将 provinceData 转换为数组
var provinceArray = Object.entries(provinceData).map(([key, value]) => ({
provinceName: key, finalTotalAmount: value.provincetotalRevenue
}));
// 获取前五
var Top5provincedata = provinceArray.sort((a, b) => b.finalTotalAmount -
a.finalTotalAmount).slice(0, 10)
// 获取数据
var province = Top5provincedata.map(item => item.provinceName).slice(0,
10)
var totalamount = Top5provincedata.map(item =>
item.finalTotalAmount).slice(0, 10)
// 打印结果
console.log("省份", province)
console.log("消费额", totalamount)
let option = {
yAxis: { data: province, type: 'category' },
xAxis: { type: 'value' },
series: {
data: totalamount,
type: 'bar',
label: {
show: true,
position: 'right'
}
},
title: {
text: "2020年消费总额最高的10个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十四：用柱状图展示消费额最低的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最低的5个省份，同时将用于图表展示的 数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并 粘
贴至对应报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份总销售额
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalRevenue = curr.finalTotalAmount;
return acc;
}, {});
// 将 provinceData 转换为数组
var provinceArray = Object.entries(provinceData).map(([key, value]) => ({
provinceName: key, finalTotalAmount: value.provincetotalRevenue
}));
// 获取前五
var Top5provincedata = provinceArray.sort((a, b) => a.finalTotalAmount -
b.finalTotalAmount).slice(0, 5)
// 获取数据
var province = Top5provincedata.map(item => item.provinceName).slice(0, 5)
var totalamount = Top5provincedata.map(item =>
item.finalTotalAmount).slice(0, 5)
// 打印结果
console.log("省份", province)
console.log("消费额", totalamount)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: {
data: totalamount,
type: 'bar',
label: {
show: true,
position: 'top'
}
},
title: {
text: "2020年消费额最低的5个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
</script>结果展示
任务十五：用柱状图展示各省份消费额的中位数
编写Vue工程代码，根据接口，用柱状图展示2020年部分省份所有订单消费额的中位数（前10省 份，降
序排列，若有小数则四舍五入保留两位），同时将用于图表展示的数据结构在浏览器的console中 进行
打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴报告中。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各省份销售额数组
var provinceData = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = [];
}
acc[curr.provinceName].push(curr.finalTotalAmount);
return acc;
}, {});
// 计算各省份销售额中位数
var provinceMedian = Object.entries(provinceData).map(([key, value]) => ({
provinceName: key,
medianTotalAmount: calculateMedian(value)
}));
// 按销售额中位数进行排序
provinceMedian.sort((a, b) => b.medianTotalAmount - a.medianTotalAmount);
// 获取前十
var Top5provincedata = provinceMedian.slice(0, 10);
// 获取数据
var province = Top5provincedata.map(item => item.provinceName).slice(0,
10);
var medianTotalAmount = Top5provincedata.map(item =>
item.medianTotalAmount).slice(0, 10);
// 打印结果
console.log("省份", province)
console.log("中位数", medianTotalAmount)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: {
data: medianTotalAmount,
type: 'bar',
label: {
show: true,
position: 'top'
}
},
title: {
text: "2020年部分省份所有订单消费额的中位数",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
// 计算中位数
function calculateMedian(data) {
const sortedData = data.sort((a, b) => b - a);
const len = sortedData.length;
if (len % 2 === 1) {
return sortedData[Math.floor(len / 2)];
} else {
const mid = len / 2;
return (sortedData[mid - 1] sortedData[mid]) / 2;
}
}
</script>结果展示
任务十六：用柱状图展示各地区消费额的中位数
编写Vue工程代码，根据接口，用柱状图展示2020年各地区所有订单消费额的中位数（降序排列， 若有
小数则四舍五入保留两位），同时将用于图表展示的数据结构在浏览器的console中进行打印输出， 将
图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release任务E提交结
果.docx】中对应的任务序号下。
代码语言：javascript复制<template>
<div id="main" style="width: 1000px; height: 800px;"></div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import data from '../response01.json';
export default {
setup() {
onMounted(() => {
let Mychart = echarts.init(document.getElementById("main"));
let downlog = data.data;
// 计算各地区消费额数组
var regionData = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = [];
}
acc[curr.regionName].push(curr.finalTotalAmount);
return acc;
}, {});
// 计算各地区销售额中位数
var regionMedian = Object.entries(regionData).map(([key, value]) => ({
regionName: key,
medianTotalAmount: calculateMedian(value)
}));
// 按销售额中位数进行排序
regionMedian.sort((a, b) => b.medianTotalAmount - a.medianTotalAmount);
// 获取数据
var region = regionMedian.map(item => item.regionName)
var medianTotalAmount = regionMedian.map(item => item.medianTotalAmount)
// 打印结果
console.log("地区", region)
console.log("中位数", medianTotalAmount)
let option = {
xAxis: { data: region, type: 'category' },
yAxis: { type: 'value' },
series: {
data: medianTotalAmount,
type: 'bar',
label: {
show: true,
position: 'top'
}
},
title: {
text: "2020年部分地区所有订单消费额的中位数",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.setOption(option);
});
},
};
// 计算中位数
function calculateMedian(data) {
const sortedData = data.sort((a, b) => b - a);
const len = sortedData.length;
if (len % 2 === 1) {
return sortedData[Math.floor(len / 2)];
} else {
const mid = len / 2;
return (sortedData[mid - 1] sortedData[mid]) / 2;
}
}
</script>结果展示
