Vue电商习题

直接上题！        

用条形图展示消费额最高的地区

        编写Vue工程代码，根据接口，用条形图展示2020年消费额最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

<template>
      <!-- 定义一个div元素，作为ECharts图表的容器，设置了宽高和内边距 -->  
    <div id="myBar" style="width: 500px; height: 600px;padding-left: 37%; padding-top: 150px;"></div>
</template>
<script setup>
// 导入Vue的onMounted生命周期钩子，用于在组件挂载后执行代码  
import { onMounted } from 'vue';
// 导入axios库，用于发送HTTP请求 
import axios from "axios"
// 导入echarts库的所有导出项，用于创建图表
import * as echarts from "echarts"
    // 使用onMounted钩子，确保DOM已经挂载后再执行内部代码  
onMounted(() => {
 // 使用axios发送POST请求到指定API，请求体包含开始时间和结束时间  
    axios.post("api/dataVisualization/selectOrderInfo", {
        startTime: "2020-01-01 00:00:00",
        endTime: "2020-12-31 00:00:00"
    }).then(res => {
         // 从响应中获取数据  
        const dataValue = res.data.data
         // 使用reduce方法对数据按regionName进行聚合，累加finalTotalAmount  
        const result = Object.entries(dataValue.reduce((acc, cur) => {
             // 解构赋值获取地区名和最终总金额  
            let { regionName, finalTotalAmount } = cur
            // 如果累加器中没有当前地区，则初始化为0  
            if (!acc[regionName]) { acc[regionName] = 0 }
            // 累加当前地区的总金额  
            acc[regionName] += finalTotalAmount
             // 返回累加器供下次迭代使用  
            return acc
        }, {}))
         // 遍历聚合后的结果，计算每个地区的平均消费额（存在问题，下面会指出）  
        result.forEach(j => {
             // 从原始数据中找出与当前迭代项匹配的地区名（这里存在问题，因为j[0]已经是地区名） 
            let { regionName } = dataValue.filter(d => d.regionName === j[0])[0]
             // 计算具有相同地区名的记录数（存在问题，应该在聚合阶段完成）  
            let regionAmount = dataValue.filter(d => d.regionName === regionName).length
             // 计算平均消费额并保留两位小数（这里逻辑上可能是正确的，但效率很低）  
            j[1] = (j[1] / regionAmount).toFixed(2)
        })
         // 按平均消费额降序排序结果  
        result.sort((a,b) => b[1] - a[1])
        // 初始化两个空数组用于存储最终要显示的地区名和平均消费额  
        var regionNames = [],regionAvgs = []
         // 取排序后的前五个结果（如果存在的话）  
        result.slice(0,5)
        .forEach(j => {
            // 将地区名和平均消费额分别推入对应数组  
            regionNames.push(j[0])
            regionAvgs.push(j[1])
        })
        // 在控制台打印结果（调试用）  
        console.log(regionNames); // 显示地区名数组  
        console.log(regionAvgs);// 显示平均消费额数组  
        // 创建ECharts图表的配置项对象  
        const option = {
             // 设置图表标题  
            title : {text:"用条形图展示平均消费额最高的地区",left:"center"},
             // x轴为数值轴（这里可能不合适，通常应为类别轴）
            xAxis:{type:"value"},
            // y轴为类别轴，使用地区名数组作为数据源  
            yAxis:{type:"category",data:regionNames},
            // 设置系列数据，类型为条形图，使用平均消费额数组作为数据源
            series:[{type:"bar",data:regionAvgs}]
        }
          // 初始化ECharts实例并设置其选项配置，这里使用了前面定义的div容器的id来选择元素  
        echarts.init(document.getElementById("myBar")).setOption(option)// 初始化并设置图表选项  
    }) // axios.post的then方法结束
}) // onMounted钩子函数结束  
</script>

再来一道！

用条形图展示平均消费额最高的省份

        编写Vue工程代码，根据接口，用条形图展示2020年平均消费额（四舍五入保留两位小数）最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

<template>
<div id="myBar" style="width: 500px; height: 600px;padding-left: 37%; padding-top: 150px;"></div>
</template>
<script setup>
import axios from "axios"
import { onMounted } from "vue";
import * as echarts from "echarts"
onMounted(() => {
    axios.post("api/dataVisualization/selectOrderInfo",{
        startTime:"2020-01-01 00:00:00",
        endTime:"2020-12-31 00:00:00"
    }).then(res=>{
        const datavalue = res.data.data
        const result = Object.entries((datavalue.reduce((acc,cur) => {
            let {provinceName,finalTotalAmount} = cur
            if(!acc[provinceName]){acc[provinceName]=0}
            acc[provinceName] += finalTotalAmount
            return acc
        },{})))
        result.sort((a,b) => b[1] - a[1])
        var provinceNames = [],provinceAmounts = []
        result.slice(0,10)
        .forEach(j => {
            provinceNames.push(j[0])
            provinceAmounts.push(j[1])
        })
        console.log(provinceNames);
        console.log(provinceAmounts);
        const option = {
            title : {text:"用条形图展示消费总额最高的省份",left:"center"},
            xAxis : {type:"value"},
            yAxis : {type:"category",data:provinceNames},
            series: {type:"bar",data:provinceAmounts}
        }
        echarts.init(document.getElementById("myBar")).setOption(option)
    })
})
</script>

上正片：！！！！