task3 用折线图展示每年上架商品数量变化

<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 goodsByYear = data.reduce((acc, item) => {
        var year = item.year;
        acc[year] = (acc[year] || 0) + 1;
        return acc;
      }, {});

      // 将年份和上架商品数量数据转换为数组
      var goodsData = Object.entries(goodsByYear)
          .map(([year, count]) => ({ year, count }))
          .sort((a, b) => a.year - b.year);

      // 打印数据结构到console
      console.log('商品数量:', goodsData);

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

      // 设置图表
      myChart.setOption(option);
    });
  }
};
</script>

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