如何进行选择日期的补全，当没有返回选择的某天没有数据时，进行补零(echarts图表的x轴、y轴的设置)

问题

如何进行选择日期的补全，当没有返回选择的某天没有数据时，进行补零

在父组件的使用

 <div class="chart" ref="chartRef">
        <LineChart
          ref="lineChartRef"
          :chartData="dataList"
          :selectTime="selectTime"
          :timeType="timeType"
        ></LineChart>
      </div>

子组件中的使用

<div
    id="chart"
    ref="chartRef"
    :style="{ width: '100%', height: '380px' }"
  ></div>

在父组件中获取数据，通过props，将数据传给子组件（需要传递给子组件的是选择的日期selectTime和后端返回的该日期范围的数据），后端返回的日期格式是{2023-11-07：222}这种格式的

在子组件中获取到父组件传递过来的数据，监听数据，对数据进行处理（我们需要获取到x轴和y轴的数据）

  日期格式化的方法

//日期格式化

//年月
function formatDateToYearMonth(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  return `${year}-${month}`;
}

//年月日 时
function formatDateToYearMonthHour(inputDate) {
  const date = new Date(inputDate);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，需要+1
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const formattedDate = `${year}-${month}-${day} ${hours}`;
  return formattedDate;
}

 根据开始时间和结束时间获取这一期间内所有日期的方法

function generateHourRange(startTime, endTime) {
  let timeRange = [];//定义数组，用来存放所有的日期
  let current = new Date(startTime);//获取开始时间的时间戳
  let end = new Date(endTime);//获取结束时间的时间戳
  timeRange.push(formatDateToYearMonthHour(new Date(current)));//将开始时间push进数组
  while (current < end) {//利用while循环，当结束时间大于开始时间的时候
    current.setHours(current.getHours() + 1);//将current的时间增加一个小时
    timeRange.push(formatDateToYearMonthHour(new Date(current)));//然后再将时间push进数组中
  }
  return timeRange;
}
function generateMonthRange(startTime, endTime) {
  let timeRange = [];
  let current = new Date(startTime);
  let end = new Date(endTime);
  timeRange.push(formatDateToYearMonth(new Date(current)));
  while (current < end) {
    current.setMonth(current.getMonth() + 1);
    timeRange.push(formatDateToYearMonth(new Date(current)));
  }
  return timeRange;
}
function generateDayRange(startTime, endTime) {
  let timeRange = [];
  let current = new Date(startTime);
  let end = new Date(endTime);
  timeRange.push(timeFormatter(new Date(current)));
  while (current < end) {
    current.setDate(current.getDate() + 1);
    timeRange.push(timeFormatter(new Date(current)));
  }
  return timeRange;
}

获取x轴

watch(
  () => props.selectTime,
  (newVal, oldVal) => {
    if (props.timeType === "hour") {
      chartOption.xAxis.data = generateHourRange(newVal[0], newVal[1]);
    } else if (props.timeType === "day") {
      chartOption.xAxis.data = generateDayRange(newVal[0], newVal[1]);
    } else if (props.timeType === "month") {
      chartOption.xAxis.data = generateMonthRange(newVal[0], newVal[1]);
    }
   
  },
  { immediate: true, deep: true }
);

获取y轴

//chartData传递过来的数据格式{2023-11-08:222}
watch(
  () => props.chartData,
  (newVal, oldVal) => {
    chartOption.series[0].data = [];//遍历x轴的数据（这个就是得到的所有日期）
    chartOption.xAxis.data.forEach((time) => {
      chartOption.series[0].data.push(newVal[time] ? newVal[time] : 0);//遍历x轴的时间，如果在chartData中有这个时间的数据，就用该数据，如果没有就置为0
    });
    // console.log(chartOption.series[0].data);
    nextTick(() => {//等到DOM节点获取完成之后，在刷新图表
      initChartView();
    });
  },
  { immediate: true, deep: true }
);

监听传递过来的数据，对数据进行操作，

监听selectTime（这个是通过日期选择器收集到的时间，获取到的是开始时间和结束时间，在一个数组里面，格式如下[开始时间，结束时间]），通过开始时间和结束时间，获取到这个范围内的所有日期，这里写了三个方法generateHourRange、generateDayRange、generateMonthRange，里面需要传递的参数都是开始时间和结束时间

在变化日期选择器的类型的时候，当他的type变为datetimerange时，发现展示的数据并不能展示到时分，这是因为在type变化的时候DOM结构没有更新，在日期选择器组件中加上了:key之后就可以了