编写Vue工程代码,根据接口,用条形图展示2020年平均消费额(四舍五入保留两位小数)最高的5个地区,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
结果展示:
代码展示:
<template>
<div><H2>子任务十一:用条形图展示平均消费额最高的地区</H2></div>
<div id="main"></div>
</template>
<script>
import * as echarts from '../assets/echarts.min'
import axios from 'axios'
export default {
mounted() {
var myChart = echarts.init(document.getElementById('main'));
axios.post('/api/selectOrderInfo',{
"startTime":"2020-01-01T00:00:00+0800",
"endTime":"2020-12-31T23:59:59+0800"
}).then(res => {
var data = res.data.data;
var regionData = data.reduce((acc,item) => {
var regionName = item.regionName;
var finalTotalAmount = item.finalTotalAmount;
if (acc[regionName]) {
acc[regionName].totalAmount += finalTotalAmount;
acc[regionName].orderCount ++;
} else {
acc[regionName] = {
totalAmount: finalTotalAmount,
orderCount: 1
};
}
return acc;
},{});
var regionAvg = Object.keys(regionData).map(region => ({
region,
avgAmount: (regionData[region].totalAmount / regionData[region].orderCount).toFixed(2)
}));
var top5Regions = regionAvg
.sort((a,b) => b.avgAmount - a.avgAmount)
.slice(0,5);
var regions = top5Regions.map(item => item.region);
var avgAmounts = top5Regions.map(item => parseFloat(item.avgAmount));
console.log(regions);
console.log(avgAmounts);
var option ={
title:{
text:'2020年平均消费额最高的五个地区',
left:'center'
},
xAxis:{
type:'value',
name: '平均消费额'
},
yAxis:{
type:'category',
name:'地区',
data:regions
},
series:[{
type:'bar',
data:avgAmounts
}]
};
myChart.setOption(option)
})
}
}
</script>
私聊博主获取全部数据