book3Task1用柱状图展示2020年各地区所有订单消费额的中位数

<template>
  <div>
    根据接口，用柱状图展示2020年各地区所有订单消费额的中位数（降序排列，若有小数则四舍五入保留两位）
    同时将用于图表展示的数据结构在浏览器的console中进行打印输出
  </div>
  <div id="main"></div>
</template>

<script>
import echarts from '../assets/echarts.min';
import axios from '../assets/axios';

export default {
  mounted() {
    // 初始化 ECharts 实例
    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 regionTotalAmount = data.reduce((acc, item) => {
        var regionName = item.regionName;
        acc[regionName] = (acc[regionName] || []).concat(item.finalTotalAmount);   //在 regionTotalAmount 对象中，以 regionName 为键，将对应的 finalTotalAmount 添加到数组中。使用了 || 来处理 acc[regionName] 不存在的情况，如果不存在，就初始化为一个空数组 []，然后再调用 concat 方法，将当前元素的 finalTotalAmount 添加到数组中。
        return acc;
      }, {});

      // 计算每个地区的订单消费额中位数
      var regionMedian = Object.keys(regionTotalAmount).map(region => ({
        region,
        medianAmount: calculateMedian(regionTotalAmount[region]).toFixed(2)
      }));

      // 按中位数降序排序
      regionMedian.sort((a, b) => b.medianAmount - a.medianAmount);

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

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各地区订单消费额中位数',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: regionMedian.map(item => item.region)
        },
        yAxis: {
          type: 'value',
          name: '订单消费额'
        },
        series: [{
          name: '订单消费额中位数',
          type: 'bar',
          data: regionMedian.map(item => parseFloat(item.medianAmount))
        }]
      };

      // 使用配置项和数据显示图表
      myChart.setOption(option);
    });
  }
};

// 计算中位数的函数
function calculateMedian(arr) {
  var sortedArr = arr.slice().sort((a, b) => a - b);       // 复制并排序数组
  var middle = Math.floor(sortedArr.length / 2);        //计算中间位置的索引

  if (sortedArr.length % 2 === 0) {                        //判断数组长度的奇偶性
    return (sortedArr[middle - 1] + sortedArr[middle]) / 2;//如果数组长度是偶数，返回中间两个数的平均值
  } else {
    return sortedArr[middle];                              //如果数组长度是奇数，返回中间的值
  }
}
</script>

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