问题
如何进行选择日期的补全,当没有返回选择的某天没有数据时,进行补零
在父组件的使用
<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之后就可以了