book4Task5 用基础散点图展示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() {
    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 || 0;

        if (acc[provinceName]) {
          acc[provinceName].totalAmount += finalTotalAmount;
          acc[provinceName].orderCount++;
        } else {
          acc[provinceName] = {
            totalAmount: finalTotalAmount,
            orderCount: 1
          };
        }

        return acc;
      }, {});

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

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

      var provinces = top10Provinces.map(item => item.province);
      var avgAmounts = top10Provinces.map(item => parseFloat(item.avgAmount));

      // 打印处理后的数据结构
      console.log('最高的十个省份名称：',provinces);
      console.log('平均消费额：',avgAmounts);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年最高10个省份平均消费额',
          left: 'center'
        },
        xAxis: {
          type: 'value',
          name: '平均消费额'
        },
        yAxis: {
          type: 'category',
          data: provinces
        },
        series: [{
          name: '平均消费额',
          type: 'scatter',
          data: top10Provinces.map(item => [parseFloat(item.avgAmount), item.province]),
          symbolSize:10
        }]
      };

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

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