book5Task2 用饼状图展示2020年各地区订单的平均消费额-CSDN博客

本文链接：https://blog.csdn.net/H222222222222/article/details/135724074

本文展示了如何使用ECharts库创建饼状图来表示2020年各地区的订单平均消费额，同时在浏览器控制台中打印订单数据结构。通过axios获取API数据并进行处理，最后生成图表显示结果。

摘要由CSDN通过智能技术生成

<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() {
    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 regionData = data.reduce((acc, item) => {
        var regionName = item.regionName;
        var finalTotalAmount = item.finalTotalAmount || 0;

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

        return acc;
      }, {});

      // 计算每个地区的订单平均消费额
      var regionAvg = Object.keys(regionData).map(region => ({
        region,
        avgAmount: (regionData[region].totalAmount / regionData[region].orderCount).toFixed(2)
      }));

      var name = regionAvg.map(item => item.region);
      var values = regionAvg.map(item => parseFloat(item.avgAmount));

      // 打印处理后的数据结构
      console.log('地区名称：',name);
      console.log('平均消费额：',values);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各地区订单平均消费额',
          left: 'center'
        },
        series: [{
          name: '平均消费额',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data:regionAvg.map(item => ({
            name: item.region,
            value: parseFloat(item.avgAmount)
          })),
          label: {
            formatter: '{b}: {c}元 ({d}%)'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

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

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