2024大数据职业技能竞赛（国赛）模块E，子任务十：用饼状图展示各地区的平均消费能力

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

编写Vue工程代码，根据接口，用饼状图展示2020年各地区订单的平均消费额，同时将用于图表展示的数据结构在浏览器的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(response => {
      var data = response.data.data;

      // 按地区统计订单消费额和订单数量
      var regionData = data.reduce((acc, item) => {
        var regionName = item.regionName;
        var finalTotalAmount = item.finalTotalAmount || 0;

        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 name = regionAvg.map(item => item.region);
      var values = regionAvg.map(item => parseFloat(item.avgAmount));

      // 打印处理后的数据结构
      console.log(name);
      console.log(values);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各地区订单平均消费额',
          left: 'center'
        },
        series: [{
          name: '平均消费额',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data:regionAvg.map(item => ({
            name: item.region,
            value: parseFloat(item.avgAmount)
          })),
          label: {
            formatter: '{b}: {c}元 ({d}%)'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    });
  }
};
</script>

<style>
#main {
  width: 100%;
  height: 500px;
}
</style>

私聊博主获取全部数据