使用echarts绘制数量随月份的折线图的setOption

function setOption(date, count) {

}

date和count是长度相等的数组，一个存储日期Date，一个存储和日期对应的数量统计。

比较特殊的是，如果统计数量为0，那么不会有相应的输入，所以必须要对数据进行处理。

import * as echarts from "echarts";

function setOption(date, count) {
  // 找到最早和最晚的日期
  const minDate = new Date(Math.min(...date));
  const maxDate = new Date(Math.max(...date));

  // 生成完整的年月序列
  const yearMonthSeries = [];
  let currentDate = new Date(minDate);
  while (currentDate <= maxDate) {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    yearMonthSeries.push(`${year}-${month.toString().padStart(2, '0')}`);
    currentDate.setMonth(currentDate.getMonth() + 1);
  }

  // 生成年月对应的数据对象
  const dataMap = {};
  for (let i = 0; i < date.length; i++) {
    const key = date[i];
    const year = key.getFullYear();
    const month = key.getMonth() + 1;
    const formattedKey = `${year}-${month.toString().padStart(2, '0')}`;
    dataMap[formattedKey] = count[i];
  }

  // 补充缺失的月份数据
  yearMonthSeries.forEach(yearMonth => {
    if (!dataMap[yearMonth]) {
      dataMap[yearMonth] = 0;
    }
  });

  // 将数据按照年月排序
  const sortedDataMap = Object.fromEntries(Object.entries(dataMap).sort());

  // 生成最终的 x 轴和数据
  const xAxisData = Object.keys(sortedDataMap);
  const seriesData = xAxisData.map(key => sortedDataMap[key]);

  let option = {
    tooltip: {
      trigger: 'axis'
    },
    title: {
      text: '每月***数统计',
      left: '5%',
      top: '5%',
      textStyle: {
        color: '#007AFF',
        fontSize: 16
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        formatter: function (value, index) {
          const parts = value.split('-');
          if (parts[1] === '01') {
            return parts[0] + '年';
          } else {
            return parts[1] + '月';
          }
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '10%',
      containLabel: true
    },
    series: [
      {
        name: '***',
        data: seriesData,
        type: 'line',
        showBackground: true,
        itemStyle: {
          color: '#0262F7'
        },
        label: {
          show: true,
          position: 'top',
          color: '#000'
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ],
    

  };
  return option;
}

export default {
  setOption
};