book4Task4用条形图展示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() {
    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)
          .sort((a,b) => b[1] - a[1])
          .slice(0,5);

      var regionNames = chartData.map(item => item[0]);
      var amounts = chartData.map(item => item[1]);

      console.log('地区名称：',regionNames);
      console.log('消费额：',amounts);

      var option = {
        title:{
          text:'2020年消费额最高的五个地区',
          left:'center'
        },
        xAxis:{
          name:'消费额',
          type:'value'
        },
        yAxis:{
          name: '地区名称',
          type:'category',
          data:regionNames
        },
        series:[{
          name:'消费额',
          type:'bar',
          data:amounts
        }]
      };

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

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