子任务一:用柱状图展示消费额最高的省份
编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
<template>
<div id="echarts1">
</div>
</template>
<script>
import * as echarts from '@/assets/echarts.min';
import axios from 'axios'
export default {
name: 'MyEcharts1',
data() {
return {
myEcharts: {}
}
},
mounted() {
axios({
url: "/api/dataVisualization/selectOrderInfo",
method: 'post',
data:{
"startTime":"2020-01-01 00:00:00",
"endTime":"2020-12-31 23:59:59"
}
}).then(({data}) => {
let a = data.data.reduce((acc,r) => {
let flag = acc.find(item => item.provinceName === r.provinceName )
if (!flag){
acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount})
}else{
flag.value += r.finalTotalAmount
}
return acc;
}, []).sort((a,b) => b.value - a.value).slice(0,5)
console.log(a)
this.myEcharts = echarts.init(document.getElementById('echarts1'), 'dark', {
height: 800,
width: 1400
})
this.myEcharts.setOption({
title: {
text: '2020年消费额最高的5个省份'
},
legend: {},
xAxis: {
type: 'category',
data: a.map(r => r.provinceName)
},
yAxis: {
type: 'value'
},
series: [
{
data: a.map(r => ({
value:[
r.provinceName,
r.value
]
})),
type: 'bar'
}
]
});
})
}
}
</script>
<style scoped>
</style>
子任务二:用柱状图展示消费额最低的省份
编写Vue工程代码,根据接口,用柱状图展示2020年消费额最低的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
<template>
<div id="echarts2exam1">
</div>
</template>
<script>
import * as echarts from '@/assets/echarts.min';
import axios from 'axios'
export default {
name: 'MyEcharts2',
data() {
return {
myEcharts: {}
}
},
mounted() {
axios({
url: "/api/dataVisualization/selectOrderInfo",
method: 'post',
data:{
"startTime":"2020-01-01 00:00:00",
"endTime":"2020-12-31 23:59:59"
}
}).then(({data}) => {
let a = data.data.reduce((acc,r) => {
let flag = acc.find(item => item.provinceName === r.provinceName )
if (!flag){
acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount})
}else{
flag.value += r.finalTotalAmount
}
return acc;
}, []).sort((a,b) => a.value - b.value).slice(0,5)
console.log(a)
this.myEcharts = echarts.init(document.getElementById('echarts2exam1'), 'dark', {
height: 800,
width: 1400
})
this.myEcharts.setOption({
title: {
text: '2020年消费额最低的5个省份'
},
legend: {},
xAxis: {
type: 'category',
data: a.map(r => r.provinceName)
},
yAxis: {
type: 'value'
},
series: [
{
data: a.map(r => ({
value:[
r.provinceName,
r.value
]
})),
type: 'bar'
}
]
});
})
}
}
</script>
<style scoped>
</style>
子任务三:用折线图展示每年上架商品数量变化
编写Vue工程代码,根据接口,用折线图展示每年上架商品数量的变化情况,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
<template>
<div id="echarts3exam1">
</div>
</template>
<script>
import * as echarts from '@/assets/echarts.min';
import axios from 'axios'
export default {
name: 'MyEcharts2',
data() {
return {
myEcharts: {}
}
},
mounted() {
axios({
url: "/api/dataVisualization/selectGoodsInfo",
method: 'post',
}).then(({data}) => {
let a = data.data.reduce((acc,curr) =>{
let flag = acc.find(item => item.year === curr.year)
if (!flag){
acc.push({year: curr.year, value: 1})
}else{
flag.value += 1
}
return acc;
},[]).sort((a,b) => a.year - b.year)
console.log(a)
this.myEcharts = echarts.init(document.getElementById('echarts3exam1'), 'dark', {
height: 800,
width: 1400
})
this.myEcharts.setOption({
title: {
text: '每年上架商品数量的变化情况'
},
legend: {},
xAxis: {
type: 'category',
data: a.map(r => r.year)
},
yAxis: {
type: 'value'
},
series: [
{
data: a.map(r => ({
value:[
r.year,
r.value
]
})),
type: 'line'
}
]
});
})
}
}
</script>
<style scoped>
</style>
子任务四:用条形图展示平均消费额最高的省份
编写Vue工程代码,根据接口,用条形图展示2020年平均消费额(四舍五入保留两位小数)最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
<template>
<div id="echarts4exam1">
</div>
</template>
<script>
import * as echarts from '@/assets/echarts.min';
import axios from 'axios'
export default {
name: 'MyEcharts2',
data() {
return {
myEcharts: {}
}
},
mounted() {
axios({
url: "/api/dataVisualization/selectOrderInfo",
method: 'post',
data:{
"startTime":"2020-01-01 00:00:00",
"endTime":"2020-12-31 23:59:59"
}
}).then(({data}) => {
let a = data.data.reduce((acc,r) => {
let flag = acc.find(item => item.provinceName === r.provinceName )
if (!flag){
acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount,count:1})
}else{
flag.value += r.finalTotalAmount
flag.count += 1
}
return acc;
}, []).map(r =>{
r.avg = r.value/r.count
return r
} ).sort((a,b) => b.avg - a.avg).slice(0,5)
console.log(a)
this.myEcharts = echarts.init(document.getElementById('echarts4exam1'), 'dark', {
height: 800,
width: 1400
})
this.myEcharts.setOption({
title: {
text: '2020年平均消费额(四舍五入保留两位小数)最高的5个省份'
},
legend: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: a.map(r => r.provinceName)
},
series: [
{
data: a.map(r => (r.avg).toFixed(2)),
type: 'bar'
}
]
});
})
}
}
</script>
<style scoped>
</style>
子任务五:用折柱混合图展示省份平均消费额和地区平均消费额
编写Vue工程代码,根据接口,用折柱混合图展示2020年各省份平均消费额(四舍五入保留两位小数)和地区平均消费额(四舍五入保留两位小数)的对比情况,柱状图展示平均消费额最高的5个省份,折线图展示这5个省所在的地区的平均消费额变化,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
<template>
<div id="echarts5exam1">
</div>
</template>
<script>
import * as echarts from '@/assets/echarts.min';
import axios from 'axios'
export default {
name: 'MyEcharts2',
data() {
return {
myEcharts: {}
}
},
mounted() {
axios({
url: "/api/dataVisualization/selectOrderInfo",
method: 'post',
data:{
"startTime":"2020-01-01 00:00:00",
"endTime":"2020-12-31 23:59:59"
}
}).then(({data}) => {
let a = data.data.reduce((acc,r) => {
let flag = acc.find(item => item.provinceName === r.provinceName )
if (!flag){
acc.push({ regionName:r.regionName,provinceName: r.provinceName, value: r.finalTotalAmount,count:1})
}else{
flag.value += r.finalTotalAmount
flag.count += 1
}
return acc;
}, []).map(r =>{
r.avg = (r.value/r.count).toFixed(2)
return r
} ).sort((a,b) => b.avg - a.avg).slice(0,5)
let b = data.data.reduce((acc,r) => {
let flag = acc.find(item => item.regionName === r.regionName)
if (!flag){
acc.push({ regionName:r.regionName, value: r.finalTotalAmount,count:1})
}else{
flag.value += r.finalTotalAmount
flag.count += 1
}
return acc;
}, []).map(r =>{
r.avg = (r.value/r.count).toFixed(2)
return r
} )
a.forEach(r =>{
let flag = b.find(item => item.regionName === r.regionName)
if (flag){
r.regionAvg = flag.avg
}
})
console.log(a)
this.myEcharts = echarts.init(document.getElementById('echarts5exam1'), 'dark', {
height: 800,
width: 1400
})
this.myEcharts.setOption({
title: {
text: '2020年各省份平均消费额(四舍五入保留两位小数)和地区平均消费额(四舍五入保留两位小数)的对比情况'
},
legend: {},
xAxis: [{
type: 'category',
data: a.map(r => r.provinceName)
},{
type: 'category',
data: a.map(r => r.regionName)
}],
yAxis: {
type: 'value'
},
series: [
{
data: a.map(r => (r.avg)),
type: 'bar'
},
{
data: a.map(r => (r.regionAvg)),
type: 'line'
}
]
});
})
}
}
</script>
<style scoped>
</style>