book2Task1 用柱状图展示2020年前十(降序排列)省份 所有订单消费额的中位数

<template>
  <div>
    用柱状图展示2020年前十省份 所有订单消费额的中位数
    同时将用于图表展示的数据结构在浏览器的console中进行打印输出
  </div>
  <div id="main"></div>
</template>

<script>
import echarts from '../assets/echarts.min'; // 请确保安装了 echarts，并使用正确的引入方式
import axios from '../assets/axios'; // 请确保安装了 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 finalTotalAmount = item.finalTotalAmount;

        if (acc[provinceName]) {
          acc[provinceName].push(finalTotalAmount);   //push用于将一个或多个元素添加到数组的末尾。【将每个省份对应的'finalTotalAmount'添加到数组中】
        } else {
          acc[provinceName] = [finalTotalAmount];     //如果'provinceName'在'acc'对象中不存在，说明是 第一次遇到该省份，那么会 创建一个新的数组'[finalTotalAmount]'并赋值给'acc[provinceName]'
        }

        return acc;
      }, {});

      // 计算每个省份订单消费额的中位数
      var medianData = Object.keys(provinceData).map(province => {        //medianData中位数数据
        var amounts = provinceData[province].sort((a, b) => a - b);
        var len = amounts.length;
        var mid = Math.floor(len / 2);  //计算数组长度len的一半，用'Math.floor'将结果向下取整。（这是为了找到数组的中间位置）

        return {
          province,
          median: len % 2 === 0 ? ((amounts[mid - 1] + amounts[mid]) / 2).toFixed(2) : amounts[mid].toFixed(2)
        };  //'==='比较值 和 比较值的类型【比较的两个值类型不同，返回'false'。】【只有在值和类型 都相同时，'==='才返回'true'】 ；      ‘len%2===0’表示判断长度'len'是否为偶数，是就返回'true',否则返回'false'。
      });

      // 按中位数降序排序并取前10个省份
      var top10Provinces = medianData
          .sort((a, b) => b.median - a.median)
          .slice(0, 10);

      // 打印处理后的数据结构
      console.log('最高的十个省份',top10Provinces);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年部分省份订单消费额中位数',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: top10Provinces.map(item => item.province)
        },
        yAxis: {
          type: 'value',
          name: '中位数'
        },
        series: [{
          data: top10Provinces.map(item => parseFloat(item.median)),
          type: 'bar'
        }]
      };

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

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