task5 用柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化

<template>
  <div>
    用折柱混合图展示2020年各省份平均消费额（四舍五入保留两位小数）和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化
    同时将用于图表展示的数据结构在浏览器的console中进行打印输出
  </div>
  <div id="main"></div>
</template>

<script>
import echarts from '../assets/echarts.min';
import axios from '../assets/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 provinceData = data.reduce((acc, item) => {
        var provinceName = item.provinceName;
        var regionName = item.regionName;
        var finalTotalAmount = item.finalTotalAmount;

        // 汇总省份数据
        if (acc.provinces[provinceName]) {
          acc.provinces[provinceName].totalAmount += finalTotalAmount;
          acc.provinces[provinceName].orderCount++;
          acc.provinces[provinceName].regionName = regionName; // 保存地区名
        } else {
          acc.provinces[provinceName] = {
            totalAmount: finalTotalAmount,
            orderCount: 1,
            regionName: regionName,
            regionAvgAmount: 0, // 初始值为0
          };
        }

        // 汇总地区数据
        if (acc.regions[regionName]) {
          acc.regions[regionName].totalAmount += finalTotalAmount;
          acc.regions[regionName].orderCount++;
        } else {
          acc.regions[regionName] = {
            totalAmount: finalTotalAmount,
            orderCount: 1
          };
        }

        return acc;
      }, { provinces: {}, regions: {} });

      // 计算每个省份的平均消费额
      var provinceAvg = Object.keys(provinceData.provinces).map(province => {
        var avgAmount = (provinceData.provinces[province].totalAmount / provinceData.provinces[province].orderCount).toFixed(2);
        return {
          province,
          avgAmount,
          regionName: provinceData.provinces[province].regionName
        };
      });

      // 更新每个省份对应地区的平均消费额
      provinceAvg.forEach(item => {
        var correspondingRegion = provinceData.provinces[item.province].regionName;
        item.regionAvgAmount = (provinceData.regions[correspondingRegion].totalAmount / provinceData.regions[correspondingRegion].orderCount).toFixed(2);
      });

      // 按平均消费额降序排序并取前5个省份
      var top5Provinces = provinceAvg
          .sort((a, b) => b.avgAmount - a.avgAmount)
          .slice(0, 5);

      // 打印处理后的数据结构
      console.log("平均消费额前五的省份和地区的平均消费额：",top5Provinces);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各省份平均消费额和地区平均消费额对比',
          left: 'center'
        },
        legend: {
          data: ['省份平均消费额', '地区平均消费额'],
          top: 'bottom'
        },
        xAxis: [{
          type: 'category',
          data: top5Provinces.map(item => item.province)
        },{
          type: 'category',
          data: top5Provinces.map(item => item.regionName)
        }],
        yAxis: [
          {
            type: 'value',
            name: '省份平均消费额'
          },
          {
            type: 'value',
            name: '地区平均消费额'
          }
        ],
        series: [
          {
            name: '省份平均消费额',
            type: 'bar',
            data: top5Provinces.map(item => parseFloat(item.avgAmount))
          },
          {
            name: '地区平均消费额',
            type: 'line',
            yAxisIndex: 1,
            data: top5Provinces.map(item => parseFloat(item.regionAvgAmount))
          }
        ]
      };

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

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