福建省大数据职业技能大赛电商数据可视化-接口数据源
原创
介绍
此项目基于vue3，结合echarts获取接口（根据跨域文件获取相关数据），数据进行数据可视化
任务一：用柱状图展示消费额最高的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 600px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各省份总销售额
var provinceTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalRevenue += curr.finalTotalAmount;
return acc;
}, {});
// 获取前十
var provinceData = Object.entries(provinceTotalRevenue).map(([key, value]) => ({
provinceName: key,
finalTotalAmount: value.provincetotalRevenue
}))
.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount)
.slice(0, 5)
// 获取数据
var province = provinceData.map(item => item.provinceName)
var revenue = provinceData.map(item => item.finalTotalAmount)
// 打印结果
console.log("省份", province)
console.log("消费额", revenue)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年消费额最高的5个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务二：用饼状图展示各地区消费能力
编写Vue工程代码，根据接口，用饼状图展示2020年各地区的消费总额占比，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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
}))
// 打印结果
console.log(result)
let option = {
series: { data: result, type: 'pie' },
title: {
text: "2020年各地区的消费总额占比",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务三：用散点图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用基础散点图展示每年上架商品数量的变化情况，同时将用于图表展示
的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图
并粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectGoodsInfo' , postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算每年上架商品数量
const productCountByYear = downlog.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' },
title: {
text: "每年上架商品数量的变化",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务四：用条形图展示平均消费额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个
省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器
console打印结果分别截图并粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各省份总销售额
var provinceTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
totalrevenue: 0,
ordercount: 0
};
}
acc[curr.provinceName].totalrevenue += curr.finalTotalAmount;
acc[curr.provinceName].ordercount++
return acc;
}, {});
// 获取前五
var provinceData = Object.entries(provinceTotalRevenue).map((item) =>
({
provinceName: item[0],
avgrevenue: (item[1].totalrevenue / item[1].ordercount).toFixed(2)
}))
.sort((a, b) => b.avgrevenue - a.avgrevenue)
.slice(0, 5)
// 获取数据
var province = provinceData.map(item => item.provinceName)
var avgrevenue = provinceData.map(item => item.avgrevenue)
// 打印结果
console.log("省份", province)
console.log("消费额", avgrevenue)
let option = {
yAxis: { data: province, type: 'category' },
xAxis: { type: 'value' },
series: { data: avgrevenue, type: 'bar' },
title: {
text: "2020年平均消费额最高的5个省份",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务五：用折柱混合图展示省份平均消费额和地区平均消费额
编写Vue工程代码，根据接口，用折柱混合图展示2020年各省份平均消费额（四舍五入保留两位小数）
和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线
图展示这5个省所在的地区的平均消费额变化，同时将用于图表展示的数据结构在浏览器的console中进
行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算省份总销售额
var provinceTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
totalRevenue: 0,
ordercount: 0
}
}
acc[curr.provinceName].totalRevenue += curr.finalTotalAmount
acc[curr.provinceName].ordercount++
return acc
}, {})
// 获取前五省份
var provinceData = Object.entries(provinceTotalRevenue).map((item) => ({
provinceName: item[0],
avgprovincerevenue: (item[1].totalRevenue /
item[1].ordercount).toFixed(2)
}))
.sort((a, b) => b.avgprovincerevenue - a.avgprovincerevenue)
.slice(0, 5)
// 获取数据
var province = provinceData.map(item => item.provinceName)
var avgprovincerevenue = provinceData.map(item => item.avgprovincerevenue)
// 计算各地区平均销售额
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 regionArr = province.map(provinceName => {
var regionName = downlog.find(item => item.provinceName ===
provinceName).regionName;
return regionName;
});
// 计算地区平均消费额
var avgregionRevenue = regionArr.map(regionName => {
var avg = (regionTotalRevenue[regionName].totalRevenue /
regionTotalRevenue[regionName].ordercount).toFixed(2)
return avg
});
// 打印结果
console.log("省份", province)
console.log("省份平均消费额", avgprovincerevenue)
console.log("地区", regionArr)
console.log("地区平均消费额", avgregionRevenue)
let option = {
xAxis: [{ data: province, type: 'category' },
{ data: regionArr, type: 'category' }],
yAxis: { type: 'value' },
series: [{ data: avgprovincerevenue, type: 'bar' },
{ data: avgregionRevenue, type: 'line' }],
title: {
text: "2020年各省份平均消费额和地区平均消费额的对比情况",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务六：用折线图展示每年上架商品数量的变化
编写Vue工程代码，根据接口，用折线图展示每年上架商品数量的变化情况，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectGoodsInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算每年上架商品数量
const productCountByYear = downlog.reduce((acc, curr) => {
if (!acc[curr.year]) {
acc[curr.year] = 0;
}
acc[curr.year]++;
return acc;
}, {});
// 将 productCountByYear 转换为数组
const productCountArray = Object.entries(productCountByYear).map(([key,
value]) => ({
year: key,
count: value
}));
// 获取数据
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' },
title: {
text: "每年上架商品数量的变化情况",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务七：用条形图展示消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年消费额最高的5个地区，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各地区总消费额
var regionTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalrevenue: 0
}
}
acc[curr.regionName].totalrevenue += curr.finalTotalAmount
return acc
}, {})
// 获取前五
var regionData = Object.entries(regionTotalRevenue).map(([key, value]) => ({
regionName: key,
finalTotalAmount: value.totalrevenue
}))
.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount)
.slice(0, 5)
// 获取数据
var region = regionData.map(item => item.regionName)
var revenue = regionData.map(item => item.finalTotalAmount)
// 打印结果
console.log("地区", region)
console.log("消费额", revenue)
let option = {
xAxis: { data: region, type: 'category' },
yAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务八：用散点图展示省份平均消费额
编写Vue工程代码，根据接口，用基础散点图展示2020年最高10个省份平均消费额（四舍五入保留两位
小数），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览
器console打印结果分别截图并粘贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各省份总销售额
var provinceTOtalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
totalrevenue: 0,
ordercount: 0
};
}
acc[curr.provinceName].totalrevenue += curr.finalTotalAmount;
acc[curr.provinceName].ordercount++;
return acc;
}, {});
// 获取前十
var provinceData = Object.entries(provinceTOtalRevenue).map(([key, value]) => ({
provinceName: key,
avgprovincerevenue: (value.totalrevenue / value.ordercount).toFixed(2)
}))
.sort((a, b) => b.avgprovincerevenue - a.avgprovincerevenue)
.slice(0, 10)
// 获取数据
var province = provinceData.map(item => item.provinceName)
var revenue = provinceData.map(item => item.avgprovincerevenue);
// 打印结果
console.log("省份", province)
console.log("消费额", revenue)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: { data: revenue, type: 'scatter' },
title: {
text: "2020年最高10个省份平均消费额",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务九：用柱状图展示消费额最高的地区
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个地区，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各地区总销售额
var regionTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.regionName]) {
acc[curr.regionName] = {
totalrevenue: 0,
};
}
acc[curr.regionName].totalrevenue += curr.finalTotalAmount;
return acc;
}, {});
// 获取前五
var regionData = Object.entries(regionTotalRevenue).map(([key, value]) =>
({
regionName: key,
finalTotalAmount: value.totalrevenue
}))
.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount)
.slice(0, 5)
// 获取数据
var region = regionData.map(item => item.regionName)
var revenue = regionData.map(item => item.finalTotalAmount);
// 打印结果
console.log("地区", region)
console.log("消费额", revenue)
let option = {
xAxis: { data: region, type: 'category' },
yAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十：用条形图展示平均消费额最高的地区
编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个
地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器
console打印结果分别截图并粘贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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 regionData = Object.entries(regionTotalRevenue).map((item) => ({
regionName: item[0],
avgregionrevenue: (item[1].totalRevenue / item[1].ordercount).toFixed(2)
}))
.sort((a, b) => b.avgregionrevenue - a.avgregionrevenue)
.slice(0, 5)
// 获取数据
var region = regionData.map(item => item.regionName)
var revenue = regionData.map(item => item.avgregionrevenue);
// 打印结果
console.log("地区", region)
console.log("消费额", revenue)
let option = {
yAxis: { data: region, type: 'category' },
xAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年平均消费额最高的5个地区",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十一：用柱状图展示消费额最高的用户
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个用户，同时将用于图表展示的数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘
贴至对应报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
import { propsToAttrMap } from '@vue/shared';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 对用户进行统计
let userTotalRevenue = downlog.reduce((acc, curr) => {
if (!curr.userName) {
// 用户名为null，不进行处理
return acc;
}
if (!acc[curr.userName]) {
acc[curr.userName] = {
totalrevenue: 0
}
}
acc[curr.userName].totalrevenue += curr.finalTotalAmount
return acc
}, {});
// 获取前五用户
var userData = Object.entries(userTotalRevenue).map(([key, value]) => ({
userName: key,
finalTotalAmount: value.totalrevenue
}))
.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount)
.slice(0, 5)
// 获取数据
let user = userData.map(item => item.userName);
let revenue = userData.map(item => item.finalTotalAmount);
// 打印结果
console.log("用户", user)
console.log("消费额", revenue)
let option = {
xAxis: { data: user, type: 'category' },
yAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年消费额最高的5个用户",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十二：用玫瑰图展示各地区消费能力
编写Vue工程代码，根据接口，用基础南丁格尔玫瑰图展示2020年各地区的消费总额占比，同时将用于
图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果
分别截图并粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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
}))
// 打印结果
console.log(result)
let option = {
series: { data: result, type: 'pie' },
roseType: "area",
title: {
text: "2020年各地区的消费总额占比",
x: "center",
textStyle: {
fontSize: 25
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十三：用条形图展示消费总额最高的省份
编写Vue工程代码，根据接口，用条形图展示2020年消费总额最高的10个省份，同时将用于图表展示的
数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并
粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
let downlog = data.data;
// 计算各省份总销售额
var provinceTotalRevenue = downlog.reduce((acc, curr) => {
if (!acc[curr.provinceName]) {
acc[curr.provinceName] = {
provincetotalRevenue: 0
};
}
acc[curr.provinceName].provincetotalRevenue += curr.finalTotalAmount;
return acc;
}, {});
// 获取前十
var provinceData = Object.entries(provinceTotalRevenue).map(([key, value])
=> ({
provinceName: key,
finalTotalAmount: value.provincetotalRevenue
}))
.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount)
.slice(0, 10)
// 获取数据
var province = provinceData.map(item => item.provinceName)
var revenue = provinceData.map(item => item.finalTotalAmount)
// 打印结果
console.log("省份", province)
console.log("消费额", revenue)
let option = {
yAxis: { data: province, type: 'category' },
xAxis: { type: 'value' },
series: { data: revenue, type: 'bar' },
title: {
text: "2020年消费额最高的10个省份",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十四：用柱状图展示消费额最低的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最低的5个省份，同时将用于图表展示的 数
据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并 粘贴至对应报告中。
<template>
<div id="main" style="width: 650px; height: 400px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectGoodsInfo' , postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
</script>结果展示
任务十五：用柱状图展示各省份消费额的中位数
编写Vue工程代码，根据接口，用柱状图展示2020年部分省份所有订单消费额的中位数（前10省 份，降
序排列，若有小数则四舍五入保留两位），同时将用于图表展示的数据结构在浏览器的console中 进行
打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴报告中。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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)
}))
.sort((a, b) => b.medianTotalAmount - a.medianTotalAmount)
.slice(0, 10);
// 获取数据
var province = provinceMedian.map(item => item.provinceName)
var medianTotalAmount = provinceMedian.map(item => item.medianTotalAmount)
// 打印结果
console.log("省份", province)
console.log("中位数", medianTotalAmount)
let option = {
xAxis: { data: province, type: 'category' },
yAxis: { type: 'value' },
series: { data: medianTotalAmount, type: 'bar' },
title: {
text: "2020年部分省份所有订单消费额的中位数",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
// 计算中位数
function calculateMedian(data) {
const sortedData = data.sort((a, b) => b - a);
const len = sortedData.length;
if (len % 2 === 1) {
return sortedData[(len - 1) / 2]
} else {
const mid = len / 2;
return (sortedData[mid - 1] + sortedData[mid]) / 2;
}
}
</script>结果展示
任务十六：用柱状图展示各地区消费额的中位数
编写Vue工程代码，根据接口，用柱状图展示2020年各地区所有订单消费额的中位数（降序排列， 若有
小数则四舍五入保留两位），同时将用于图表展示的数据结构在浏览器的console中进行打印输出， 将
图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结
果.docx】中对应的任务序号下。
<template>
<div id="main" style="width: 800px; height: 450px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from '../echarts.min.js';
export default {
setup() {
const Mychart = ref(null);
async function fetchData() {
// 配置 POST 请求的参数
const postData = {
startTime: '2020-01-01 00:00:00',
endTime: '2020-12-30 00:00:00'
};
try {
// 发送 POST 请求
const response = await
axios.post('/api/dataVisualization/selectOrderInfo', postData);
// 处理响应数据
visualizeData(response.data);
} catch (error) {
// 处理错误
console.error(error);
}
}
function visualizeData(data) {
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)
}))
.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' },
title: {
text: "2020年部分地区所有订单消费额的中位数",
x: "center",
textStyle: {
fontSize: 30
}
}
};
Mychart.value.setOption(option);
}
onMounted(() => {
Mychart.value = echarts.init(document.getElementById("main"));
fetchData();
});
return {
Mychart
};
}
};
// 计算中位数
function calculateMedian(data) {
const sortedData = data.sort((a, b) => b - a);
const len = sortedData.length;
if (len % 2 === 1) {
return sortedData[(len - 1) / 2]
} else {
const mid = len / 2;
return (sortedData[mid - 1] + sortedData[mid]) / 2;
}
}
</script>结果展示
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
