book2Task3 【与book1Task3的题目一样】用折线图展示每年上架商品数量的变化情况

<template>
  <div>
    【与book1Task3的题目一样】
    用折线图展示每年上架商品数量的变化情况
    同时将用于图表展示的数据结构在浏览器的console中进行打印输出
  </div>
  <div id="main"></div>
</template>

<script>
import echarts from '../assets/echarts.min'; // 请确保安装了 echarts，并使用正确的引入方式
import axios from '../assets/axios'; // 请确保安装了 axios，并使用正确的引入方式

export default {
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));

    axios.post('/api/selectGoodsInfo').then(response => {
      var data = response.data;

      // 按年份汇总上架商品数量
      var yearData = data.reduce((acc, item) => {
        var year = item.year;

        if (acc[year]) {    //判断'acc'对象中是否已有 对应年份的计数。
          acc[year]++;      //如果条件成立，表示'acc'对象中已有了这个年份的计数，那么执行'acc[year]++'，即当前年份的计数增加1
        } else {            //如果条件不成立，表示'acc'对象中还没有这个年份的计数，那么执行'acc[year]=1'，即在'acc'对象中创建一个新的属性，表示当前年份的计数，并初始化为1
          acc[year] = 1;
        }                   //最终得到一个包含 每个年份对应计数的对象'acc'

        return acc;
      }, {});

      // 转换为数组形式，按年份排序
      var lineData = Object.entries(yearData)    //将'yearData'对象转换为一个由'[key,value]'对组成的数组。
          .sort((a, b) => parseInt(a[0]) - parseInt(b[0]))   //parseInt(a[0])将年份的 字符串形式 转换为 整数 再进行比较
          .map(([year, count]) => ({                  //对排序后的数组进行 映射 ，将每个'[year,count]'数组转换为一个 对象 。每个对象有两个 属性 year和count（对应的计数）
            year: parseInt(year),
            count: count
          }));

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

      // 设置图表选项
      var option = {
        title: {
          text: '每年上架商品数量变化情况',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: lineData.map(item => item.year)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '商品数量',
          type: 'line',
          data: lineData.map(item => item.count)
        }]
      };

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

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