book3Task3 用基础散点图展示每年上架商品数量的变化情况

<template>
  <div>
    根据接口，用基础散点图展示每年上架商品数量的变化情况
    同时将用于图表展示的数据结构在浏览器的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/selectGoodsInfo').then(response => {
      var data = response.data;

      // 按年份汇总上架商品数量
      var yearTotal = data.reduce((acc, item) => {
        var year = item.year;
        if (!acc[year]) {
          acc[year] = [];
        }                  //!acc[year]：这是一个条件判断，检查 acc 对象中是否已经存在 year 这个键。'!' 是逻辑非操作符，当 acc[year] 不存在（或者为假值）时，条件成立。
        acc[year].push(1); // 每上架一个商品加一个点
        return acc;
      }, {});

      // 将汇总数据转换为数组形式
      var scatterData = Object.entries(yearTotal)
          .sort((a, b) => a[0] - b[0])
          .map(item => ({ year: item[0], count: item[1].length })); //将排序后的数组映射为包含'year'和'count'属性的对象数组，其中year表示年份，count表示对应年份上架商品的数量。  'item[1].length'表示每个年份商品数组的长度，即上架商品数量。

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

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

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

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