2024大数据职业技能竞赛（国赛）模块E，子任务一：用柱状图展示消费额最高的省份

2024大数据职业技能竞赛（国赛）模块E数据展现题解

编写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": "2023-01-01T00:00:00+0800",
      "endTime": "2023-12-31T23:59:59+0800"
    }).then(response => {
      var data = response.data.data;
 
      // 按省份统计消费额
      var provinceData = data.reduce((acc, item) => {
        var province = item.provinceName;
        var totalAmount = item.finalTotalAmount;
 
        acc[province] = (acc[province] || 0) + totalAmount;
        return acc;
      }, {});
 
      // 将省份消费额数据转换为数组
      var provinceAvg = Object.entries(provinceData)
          .map(([province, avgAmount]) => ({ province, avgAmount }))
          .sort((a, b) => b.avgAmount - a.avgAmount)
          .slice(0, 5);
 
      // 将省份名称和消费额分别存入两个数组
      var provinces = provinceAvg.map(item => item.province);
      var amounts = provinceAvg.map(item => item.avgAmount);
 
      // 打印数据结构到console
      console.log(provinces);
      console.log(amounts);
 
      // 配置图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '2023年消费额最高的五个省份',
          left: 'center'
        },
        xAxis: {
          name: '省份',
          type: 'category',
          data: provinces
        },
        yAxis: {
          name: '消费额度/元',
          type: 'value'
        },
        series: [{
          data: amounts,
          type: 'bar'
        }]
      };
 
      // 设置图表
      myChart.setOption(option);
    });
  }
};
</script>
 
<style>
#main {
  width: 100%;
  height: 500px;
}
</style>

写的不错就点个关注+收藏吧，如代码有错接受指正！
需要接口数据的可以私聊！！！