book3Task2 用饼状图展示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] || 0) + item.finalTotalAmount;
        return acc;
      }, {});

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

      // 计算总消费额
      var totalAmount = chartData.reduce((acc, item) => acc + item[1], 0); //chartData: 这是一个数组，每个元素都是一个包含两个值的数组，例如 [value1, value2]。reduce((acc, item) => acc + item[1], 0): 这是使用 reduce 函数来对数组进行累加的部分。acc 是累加的结果，item 是数组中的每个元素，item[1] 表示当前元素的第二个值。  acc + item[1]: 这是每次迭代时累加的操作，将当前元素的第二个值加到累加结果上。 , 0: 这是 reduce 函数的初始值，表示累加的起始值为 0。
                                                                           //最终，totalAmount变量将包含chartData数组中所有元素的第二个值的总和。这在对数组中的数值进行汇总或求和时是一种常见的用法。

      // 计算占比
      var pieData = chartData.map(item => ({
        name: item[0],
        value: ((item[1] / totalAmount) * 100).toFixed(2)   //设置新对象的 value 属性为数组元素的第二个值除以总和，然后乘以 100 得到百分比，最后使用 toFixed(2) 将结果保留两位小数。
      }));

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

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各地区消费总额占比',
          left: 'center'
        },
        series: [{
          name: '消费总额占比',
          type: 'pie',
          radius: '55%',            //设置饼图的半径，可以是绝对数值或相对于容器的百分比。这里是相对于容器宽度的55%。
          center: ['50%', '60%'],   //设置饼图的中心位置，也是相对于容器的百分比。这里是相对于容器宽度和高度的50%和60%。

          data: pieData,
          emphasis: {               //设置饼图的高亮样式，这里设置了阴影效果。
            itemStyle: {            //设置饼图每个扇形区域的样式
              shadowBlur: 10,       //阴影的模糊半径。
              shadowOffsetX: 0,     //阴影的水平偏移。
              shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影的颜色
            }
          }
        }]
      };

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

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