book2Task4 用条形图展示2020年消费总额最高的10个省份

<template>
  <div>
    用条形图展示2020年消费总额最高的10个省份
    同时将用于图表展示的数据结构在浏览器的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 provinceTotalAmount = data.reduce((acc, item) => {
        var provinceName = item.provinceName;
        acc[provinceName] = (acc[provinceName] || 0) + item.finalTotalAmount;  //'acc[provinceName] || 0' 这部分是一个短路运算符，如果'acc'对象中的'provinceName'已经存在，它会返回'acc[provinceName]'的值；如果不存在，它会返回'0'
        return acc;
      }, {});

      // 转换为数组形式
      var chartData = Object.entries(provinceTotalAmount);

      // 按消费额度降序排序
      chartData.sort((a, b) => b[1] - a[1]);

      // 取前10个省份
      chartData = chartData.slice(0, 10);

               //前三行代码可改成下列的 链式调用 方式
               // var chartData = Object.entries(provinceTotalAmount)
               //     .sort((a,b) => b[1] - a[1])
               //     .slice(0,10);

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

      // 设置图表选项
      var option = {
        title: {
          text: '2020年消费总额最高的10个省份',
          left: 'center'
        },
        xAxis: {
          name:'消费总额',
          type: 'value'
        },
        yAxis: {
          name:'省份名称',
          type: 'category',
          data: chartData.map(item => item[0])  //将'chartData'数组中的每个元素的第一个值作为图表的数据。
        },
        series: [{
          name: '消费总额',
          type: 'bar',
          data: chartData.map(item => item[1])  //将'chartData'数组中的每个元素的第二个值作为图表的数据。
        }]                                      //'[0]'表示省份名称，'[1]'表示对应的消费总额
      };

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

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